/* variables.css */
/*==================================================
  RechargePlanInfo.in
  CSS Variables
  File: assets/css/base/variables.css
==================================================*/

:root{

    /*==========================================
      Brand Colors
    ==========================================*/

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #eff6ff;

    --secondary: #0f172a;
    --secondary-light: #334155;

    --success: #16a34a;
    --success-light: #dcfce7;

    --danger: #dc2626;
    --danger-light: #fee2e2;

    --warning: #f59e0b;
    --warning-light: #fef3c7;

    --info: #0284c7;
    --info-light: #e0f2fe;


    /*==========================================
      Text Colors
    ==========================================*/

    --heading: #111827;
    --text: #4b5563;
    --text-light: #6b7280;
    --muted: #9ca3af;


    /*==========================================
      Background Colors
    ==========================================*/

    --white: #ffffff;

    --bg: #f8fafc;

    --bg-light: #f1f5f9;

    --bg-dark: #0f172a;


    /*==========================================
      Border
    ==========================================*/

    --border: #e5e7eb;

    --border-light: #eef2f7;

    --border-dark: #cbd5e1;


    /*==========================================
      Radius
    ==========================================*/

    --radius-xs: 6px;

    --radius-sm: 10px;

    --radius: 14px;

    --radius-lg: 18px;

    --radius-xl: 24px;

    --radius-pill: 999px;


    /*==========================================
      Shadows
    ==========================================*/

    --shadow-xs: 0 1px 4px rgba(0,0,0,.04);

    --shadow-sm: 0 2px 10px rgba(0,0,0,.05);

    --shadow-md: 0 8px 25px rgba(0,0,0,.08);

    --shadow-lg: 0 18px 40px rgba(0,0,0,.12);


    /*==========================================
      Typography
    ==========================================*/

    --font-family: "Inter", sans-serif;

    --font-size-xs: 12px;

    --font-size-sm: 13px;

    --font-size: 15px;

    --font-size-md: 16px;

    --font-size-lg: 18px;

    --font-size-xl: 22px;

    --font-size-2xl: 28px;

    --font-size-3xl: 34px;


    /*==========================================
      Font Weight
    ==========================================*/

    --fw-normal: 400;

    --fw-medium: 500;

    --fw-semibold: 600;

    --fw-bold: 700;

    --fw-extrabold: 800;


    /*==========================================
      Spacing
    ==========================================*/

    --space-1: 4px;

    --space-2: 8px;

    --space-3: 12px;

    --space-4: 16px;

    --space-5: 20px;

    --space-6: 24px;

    --space-7: 30px;

    --space-8: 40px;

    --space-9: 50px;

    --space-10: 60px;


    /*==========================================
      Container
    ==========================================*/

    --container-width: 1240px;


    /*==========================================
      Header
    ==========================================*/

    --header-height: 72px;


    /*==========================================
      Z-Index
    ==========================================*/

    --z-dropdown: 1000;

    --z-sticky: 1020;

    --z-fixed: 1030;

    --z-modal: 1050;

    --z-tooltip: 1080;


    /*==========================================
      Animation
    ==========================================*/

    --transition-fast: .20s ease;

    --transition: .30s ease;

    --transition-slow: .45s ease;

}
/* reset.css */
/*==================================================
  RechargePlanInfo.in
  CSS Reset
  File: assets/css/base/reset.css
==================================================*/

/*==========================================
  Universal
==========================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*==========================================
  HTML
==========================================*/

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

/*==========================================
  Body
==========================================*/

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-family);
    font-size:var(--font-size);
    font-weight:var(--fw-normal);
    line-height:1.6;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/*==========================================
  Images
==========================================*/

img{
    display:block;
    max-width:100%;
    height:auto;
    border:0;
}

/*==========================================
  SVG
==========================================*/

svg{
    display:block;
    max-width:100%;
}

/*==========================================
  Links
==========================================*/

a{
    color:inherit;
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    text-decoration:none;
}

/*==========================================
  Lists
==========================================*/

ul,
ol{
    list-style:none;
    margin:0;
    padding:0;
}

/*==========================================
  Paragraph
==========================================*/

p{
    margin:0;
}

/*==========================================
  Tables
==========================================*/

table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
}

/*==========================================
  Buttons
==========================================*/

button{
    border:none;
    background:none;
    cursor:pointer;
    font:inherit;
}

button:focus{
    outline:none;
}

/*==========================================
  Inputs
==========================================*/

input,
textarea,
select{
    font:inherit;
    color:inherit;
    background:transparent;
}

input:focus,
textarea:focus,
select:focus{
    outline:none;
}

/*==========================================
  Textarea
==========================================*/

textarea{
    resize:vertical;
}

/*==========================================
  Iframe
==========================================*/

iframe{
    border:0;
    width:100%;
}

/*==========================================
  Horizontal Rule
==========================================*/

hr{
    border:none;
    border-top:1px solid var(--border);
    margin:1rem 0;
}

/*==========================================
  Selection
==========================================*/

::selection{
    background:var(--primary);
    color:var(--white);
}

/*==========================================
  Placeholder
==========================================*/

::placeholder{
    color:var(--muted);
    opacity:1;
}

/*==========================================
  Hidden Attribute
==========================================*/

[hidden]{
    display:none !important;
}

/*==========================================
  Bootstrap Overrides
==========================================*/

.container{
    width:100%;
}

.row{
    margin-left:0;
    margin-right:0;
}

.row > *{
    padding-left:calc(var(--bs-gutter-x,1.5rem) * .5);
    padding-right:calc(var(--bs-gutter-x,1.5rem) * .5);
}

/* ==========================
Search Button
========================== */

.search-btn,
.btn-search,
.hero-search .btn,
.search-form .btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff !important;
    font-weight: 600;
}

.search-btn:hover,
.btn-search:hover,
.hero-search .btn:hover,
.search-form .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff !important;
}

.search-btn i,
.btn-search i,
.hero-search .btn i,
.search-form .btn-primary i {
    color: #fff !important;
}
/* typography.css */
/*==================================================
  RechargePlanInfo.in
  Typography
  File: assets/css/base/typography.css
==================================================*/


/*==========================================
  Headings
==========================================*/

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--heading);
    font-weight:var(--fw-bold);
    line-height:1.3;
    margin:0;
}

h1{
    font-size:var(--font-size-3xl);
    font-weight:var(--fw-extrabold);
}

h2{
    font-size:var(--font-size-2xl);
    font-weight:var(--fw-extrabold);
}

h3{
    font-size:var(--font-size-xl);
}

h4{
    font-size:20px;
}

h5{
    font-size:18px;
}

h6{
    font-size:16px;
}


/*==========================================
  Paragraph
==========================================*/

p{
    color:var(--text);
    font-size:var(--font-size);
    line-height:1.7;
}


/*==========================================
  Links
==========================================*/

a{
    color:inherit;
    transition:var(--transition);
}

a:hover{
    color:var(--primary);
}


/*==========================================
  Strong
==========================================*/

strong,
b{
    font-weight:var(--fw-bold);
    color:var(--heading);
}


/*==========================================
  Small
==========================================*/

small{
    font-size:var(--font-size-xs);
    color:var(--text-light);
}


/*==========================================
  Labels
==========================================*/

label{
    display:inline-block;
    margin-bottom:6px;
    color:var(--heading);
    font-size:14px;
    font-weight:var(--fw-semibold);
}


/*==========================================
  Code
==========================================*/

code{
    padding:2px 6px;
    background:var(--bg-light);
    border-radius:var(--radius-xs);
    color:var(--danger);
    font-size:13px;
}


/*==========================================
  Blockquote
==========================================*/

blockquote{
    margin:20px 0;
    padding:18px 22px;
    border-left:4px solid var(--primary);
    background:var(--primary-light);
    color:var(--heading);
    font-style:italic;
}


/*==========================================
  Horizontal Rule
==========================================*/

hr{
    border:none;
    border-top:1px solid var(--border);
    margin:30px 0;
}


/*==========================================
  Text Utilities
==========================================*/

.text-heading{
    color:var(--heading);
}

.text-body{
    color:var(--text);
}

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

.text-primary{
    color:var(--primary) !important;
}

.text-success{
    color:var(--success) !important;
}

.text-danger{
    color:var(--danger) !important;
}

.text-warning{
    color:var(--warning) !important;
}

.text-white{
    color:var(--white) !important;
}


/*==========================================
  Font Weight Utilities
==========================================*/

.fw-medium{
    font-weight:var(--fw-medium) !important;
}

.fw-semibold{
    font-weight:var(--fw-semibold) !important;
}

.fw-bold{
    font-weight:var(--fw-bold) !important;
}

.fw-extrabold{
    font-weight:var(--fw-extrabold) !important;
}


/*==========================================
  Text Alignment
==========================================*/

.text-left{
    text-align:left;
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}


/*==========================================
  Responsive Typography
==========================================*/

@media (max-width:768px){

    h1{
        font-size:30px;
    }

    h2{
        font-size:24px;
    }

    h3{
        font-size:20px;
    }

    h4{
        font-size:18px;
    }

    h5{
        font-size:16px;
    }

    h6{
        font-size:15px;
    }

    p{
        font-size:14px;
    }

}

@media (max-width:480px){

    h1{
        font-size:26px;
    }

    h2{
        font-size:22px;
    }

    h3{
        font-size:18px;
    }

    p{
        font-size:14px;
        line-height:1.6;
    }

}
/* helpers.css */
/*==================================================
  RechargePlanInfo.in
  Helper Utilities
  File: assets/css/base/helpers.css
==================================================*/


/*==========================================
  Display
==========================================*/

.d-block{
    display:block !important;
}

.d-inline-block{
    display:inline-block !important;
}

.d-flex{
    display:flex !important;
}

.d-inline-flex{
    display:inline-flex !important;
}

.d-grid{
    display:grid !important;
}

.d-none{
    display:none !important;
}


/*==========================================
  Flex
==========================================*/

.flex-column{
    flex-direction:column !important;
}

.flex-wrap{
    flex-wrap:wrap !important;
}

.justify-start{
    justify-content:flex-start !important;
}

.justify-center{
    justify-content:center !important;
}

.justify-between{
    justify-content:space-between !important;
}

.justify-end{
    justify-content:flex-end !important;
}

.align-start{
    align-items:flex-start !important;
}

.align-center{
    align-items:center !important;
}

.align-end{
    align-items:flex-end !important;
}


/*==========================================
  Width
==========================================*/

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

.h-100{
    height:100% !important;
}


/*==========================================
  Border Radius
==========================================*/

.rounded-xs{
    border-radius:var(--radius-xs) !important;
}

.rounded-sm{
    border-radius:var(--radius-sm) !important;
}

.rounded{
    border-radius:var(--radius) !important;
}

.rounded-lg{
    border-radius:var(--radius-lg) !important;
}

.rounded-xl{
    border-radius:var(--radius-xl) !important;
}

.rounded-pill{
    border-radius:var(--radius-pill) !important;
}


/*==========================================
  Shadow
==========================================*/

.shadow-xs{
    box-shadow:var(--shadow-xs) !important;
}

.shadow-sm{
    box-shadow:var(--shadow-sm) !important;
}

.shadow-md{
    box-shadow:var(--shadow-md) !important;
}

.shadow-lg{
    box-shadow:var(--shadow-lg) !important;
}


/*==========================================
  Background
==========================================*/

.bg-white{
    background:var(--white) !important;
}

.bg-primary-light{
    background:var(--primary-light) !important;
}

.bg-success-light{
    background:var(--success-light) !important;
}

.bg-danger-light{
    background:var(--danger-light) !important;
}

.bg-warning-light{
    background:var(--warning-light) !important;
}

.bg-light{
    background:var(--bg-light) !important;
}


/*==========================================
  Border
==========================================*/

.border{
    border:1px solid var(--border) !important;
}

.border-top{
    border-top:1px solid var(--border) !important;
}

.border-bottom{
    border-bottom:1px solid var(--border) !important;
}

.border-0{
    border:none !important;
}


/*==========================================
  Overflow
==========================================*/

.overflow-hidden{
    overflow:hidden !important;
}

.overflow-auto{
    overflow:auto !important;
}


/*==========================================
  Position
==========================================*/

.position-relative{
    position:relative !important;
}

.position-absolute{
    position:absolute !important;
}

.position-fixed{
    position:fixed !important;
}


/*==========================================
  Cursor
==========================================*/

.cursor-pointer{
    cursor:pointer !important;
}

.cursor-default{
    cursor:default !important;
}


/*==========================================
  Object Fit
==========================================*/

.object-cover{
    object-fit:cover !important;
}

.object-contain{
    object-fit:contain !important;
}


/*==========================================
  Transition
==========================================*/

.transition{
    transition:var(--transition) !important;
}


/*==========================================
  Visibility
==========================================*/

.visible{
    visibility:visible !important;
}

.invisible{
    visibility:hidden !important;
}


/*==========================================
  User Select
==========================================*/

.user-select-none{
    user-select:none !important;
}


/*==========================================
  Z-Index
==========================================*/

.z-dropdown{
    z-index:var(--z-dropdown);
}

.z-sticky{
    z-index:var(--z-sticky);
}

.z-fixed{
    z-index:var(--z-fixed);
}

.z-modal{
    z-index:var(--z-modal);
}


/*==========================================
  Image Helpers
==========================================*/

.img-fluid{
    max-width:100%;
    height:auto;
}

.img-circle{
    border-radius:50%;
}


/*==========================================
  Text Overflow
==========================================*/

.text-truncate{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


/*==========================================
  Screen Reader Only
==========================================*/

.visually-hidden-custom{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
/* container.css */
/*==================================================
  RechargePlanInfo.in
  Container Layout
  File: assets/css/layout/container.css
==================================================*/


/*==========================================
  Main Container
==========================================*/

.container{
    width:100%;
    max-width:var(--container-width);
    margin:0 auto;
    padding-left:16px;
    padding-right:16px;
}


/*==========================================
  Container Sizes
==========================================*/

.container-sm{
    max-width:720px;
    margin:0 auto;
}

.container-md{
    max-width:960px;
    margin:0 auto;
}

.container-lg{
    max-width:1140px;
    margin:0 auto;
}

.container-xl{
    max-width:1240px;
    margin:0 auto;
}


/*==========================================
  Fluid Container
==========================================*/

.container-fluid{
    width:100%;
    padding-left:16px;
    padding-right:16px;
}


/*==========================================
  Narrow Content
==========================================*/

.content-narrow{
    max-width:850px;
    margin:0 auto;
}


/*==========================================
  Wide Content
==========================================*/

.content-wide{
    max-width:1400px;
    margin:0 auto;
}


/*==========================================
  Section Wrapper
==========================================*/

.section-wrapper{
    width:100%;
    position:relative;
}


/*==========================================
  Responsive
==========================================*/

@media (max-width:1200px){

    .container,
    .container-xl{
        max-width:1140px;
    }

}

@media (max-width:992px){

    .container,
    .container-xl,
    .container-lg{
        max-width:960px;
    }

}

@media (max-width:768px){

    .container,
    .container-xl,
    .container-lg,
    .container-md{
        max-width:100%;
        padding-left:14px;
        padding-right:14px;
    }

    .container-fluid{
        padding-left:14px;
        padding-right:14px;
    }

}

@media (max-width:576px){

    .container,
    .container-fluid{
        padding-left:12px;
        padding-right:12px;
    }

}
/* header.css */
/*==================================================
  RechargePlanInfo.in
  Header
  File: assets/css/layout/header.css
==================================================*/

/*==================================================
  RechargePlanInfo.in
  Header
==================================================*/

/*==========================
Header
==========================*/

.site-header{
    position:sticky;
    top:0;
    z-index:1030;
    background:#fff;
    border-bottom:1px solid #e9ecef;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}

/*==========================
Navbar
==========================*/

.navbar{
    min-height:74px;
    padding:12px 0;
}

/*==========================
Brand
==========================*/

.navbar-brand{
    padding:0;
    margin:0;
}

.site-logo{
    height:58px;
    width:auto;
    max-width:260px;
    display:block;
}

.site-brand{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.site-title{
    font-size:32px;
    font-weight:800;
    color:#2563eb;
    margin:0;
}

.site-tagline{
    font-size:13px;
    color:#6b7280;
    margin-top:4px;
}

/*==========================
Navigation
==========================*/

.navbar-nav{
    align-items:center;
    gap:8px;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 18px !important;
    border-radius:10px;
    color:#374151 !important;
    font-size:15px;
    font-weight:600;
    transition:.25s;
}

.nav-link i{
    font-size:16px;
}

.nav-link:hover{
    background:#eff6ff;
    color:#2563eb !important;
}

.nav-link.active{
    background:#dbeafe;
    color:#2563eb !important;
}

/*==========================
Toggle
==========================*/

.navbar-toggler{
    border:none;
    box-shadow:none!important;
    padding:6px;
}

.navbar-toggler:focus{
    box-shadow:none;
}

/*==========================
Desktop
==========================*/

@media(min-width:992px){

    .navbar-collapse{
        justify-content:flex-end;
    }

}

/*==========================
Tablet
==========================*/

@media(max-width:991px){

    .navbar{

        min-height:68px;

    }

    .site-title{

        font-size:24px;

    }

    .site-tagline{

        display:none;

    }

    .site-logo{

        width:260px;
        height:58px;

    }

    .navbar-collapse{

        margin-top:15px;

        background:#fff;

        border-radius:14px;

        padding:15px;

        border:1px solid #e5e7eb;

        box-shadow:0 10px 25px rgba(0,0,0,.05);

    }

    .navbar-nav{

        gap:0;

    }

    .nav-link{

        padding:12px 14px!important;

        border-radius:10px;

    }

}

/*==========================
Mobile
==========================*/

@media(max-width:576px){

    .navbar{

        min-height:64px;

        padding:10px 0;

    }

    .site-logo{

        width:260px;
        height:58px;

    }

    .site-title{

        font-size:20px;

    }

    .navbar-brand{

        gap:10px;

    }

}
/* footer.css */
/*==================================================
  RechargePlanInfo.in
  Footer
==================================================*/


/*==========================================
  Footer
==========================================*/

.site-footer{

    margin-top:60px;

    background:#111827;

    color:#cbd5e1;

    font-size:15px;

}


/*==========================================
  Footer Top
==========================================*/

.footer-top{

    padding:55px 0 35px;

    border-bottom:1px solid rgba(255,255,255,.08);

}


/*==========================================
  Brand
==========================================*/

.footer-logo{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}

.footer-logo img{

    width:44px;

    height:44px;

    border-radius:10px;

    object-fit:cover;

    background:#fff;

    padding:3px;

}

.footer-logo h3{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#fff;

}

.footer-tagline{

    display:block;

    margin-top:3px;

    color:#94a3b8;

    font-size:13px;

}

.footer-description{

    margin:0 0 24px;

    color:#94a3b8;

    line-height:1.8;

}


/*==========================================
  Titles
==========================================*/

.footer-title{

    margin-bottom:18px;

    color:#fff;

    font-size:18px;

    font-weight:700;

}


/*==========================================
  Links
==========================================*/

.footer-links{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#cbd5e1;

    text-decoration:none;

    transition:.25s;

}

.footer-links a:hover{

    color:#3b82f6;

    padding-left:6px;

}

.footer-links i{

    width:18px;

}


/*==========================================
  Social
==========================================*/

.footer-social{

    display:flex;

    gap:10px;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#1e293b;

    color:#fff;

    text-decoration:none;

    transition:.25s;

}

.footer-social a:hover{

    background:#2563eb;

    transform:translateY(-3px);

}


/*==========================================
  Bottom
==========================================*/

.footer-bottom{

    padding:22px 0;

    font-size:14px;

}

.footer-bottom-links{

    display:flex;

    justify-content:flex-end;

    gap:18px;

    flex-wrap:wrap;

}

.footer-bottom-links a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.25s;

}

.footer-bottom-links a:hover{

    color:#3b82f6;

}


/*=========================================
Back To Top
=========================================*/

/*=========================================
Back To Top
=========================================*/

/*=========================================
Back To Top
=========================================*/

.back-to-top{
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;

    width: 52px;
    height: 52px;

    display: none;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #2563eb;
    color: #fff;

    cursor: pointer;

    z-index: 999999;

    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.back-to-top.show{
    display:flex;
}

.back-to-top{
    position:fixed;
    right:20px;
    bottom:20px;
    width:50px;
    height:50px;
    background:#2563eb;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:9999;
}

.arrow-up{
    width:12px;
    height:12px;
    border-top:3px solid #fff;
    border-left:3px solid #fff;
    transform:rotate(45deg);
    margin-top:6px;
}

.back-to-top:hover{
    background:#1d4ed8;
}

@media (max-width:768px){

    .back-to-top{
        right:16px !important;
        bottom:16px !important;
        width:48px;
        height:48px;
    }

}


/* buttons.css */
/*==================================================
  RechargePlanInfo.in
  Buttons
  File: assets/css/components/buttons.css
==================================================*/


/*==========================================
  Base Button
==========================================*/

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 20px;
    border:none;
    border-radius:var(--radius);
    font-size:14px;
    font-weight:var(--fw-semibold);
    line-height:1;
    cursor:pointer;
    transition:var(--transition);
}


/*==========================================
  Primary
==========================================*/

.btn-primary{
    background:var(--primary);
    color:var(--white);
}

.btn-primary:hover{
    background:var(--primary-dark);
    color:var(--white);
}


/*==========================================
  Outline Primary
==========================================*/

.btn-outline-primary{
    background:transparent;
    border:1px solid var(--primary);
    color:var(--primary);
}

.btn-outline-primary:hover{
    background:var(--primary);
    color:var(--white);
}


/*==========================================
  Success
==========================================*/

.btn-success{
    background:var(--success);
    border-color:var(--success);
    color:#fff !important;
}

.btn-success:hover,
.btn-success:focus{
    background:#146c43;
    border-color:#146c43;
    color:#fff !important;
    opacity:1;
}


/*==========================================
  Light
==========================================*/

.btn-light{
    background:var(--bg-light);
    color:var(--heading);
    border:1px solid var(--border);
}

.btn-light:hover{
    background:var(--primary-light);
    color:var(--primary);
}


/*==========================================
  Sizes
==========================================*/

.btn-sm{
    padding:8px 14px;
    font-size:13px;
}

.btn-lg{
    padding:14px 28px;
    font-size:16px;
}


/*==========================================
  Full Width
==========================================*/

.btn-block{
    width:100%;
}


/*==========================================
  Rounded
==========================================*/

.btn-pill{
    border-radius:var(--radius-pill);
}


/*==========================================
  Icon
==========================================*/

.btn-icon{
    width:42px;
    height:42px;
    padding:0;
}


/*==========================================
  Disabled
==========================================*/

.btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}


/*==========================================
  Mobile
==========================================*/

@media (max-width:768px){

    .btn{
        padding:10px 16px;
        font-size:14px;
    }

    .btn-lg{
        padding:12px 20px;
        font-size:15px;
    }

}
/* forms.css */
/*==================================================
  RechargePlanInfo.in
  Forms
  File: assets/css/components/forms.css
==================================================*/


/*==========================================
  Form Label
==========================================*/

.form-label{
    display:block;
    margin-bottom:8px;
    color:var(--heading);
    font-size:14px;
    font-weight:var(--fw-semibold);
}


/*==========================================
  Inputs
==========================================*/

.form-control,
.form-select{

    height:48px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--white);

    font-size:14px;
    color:var(--heading);

    box-shadow:none;
    transition:var(--transition);

}

.form-control:hover,
.form-select:hover{

    border-color:#d1d5db;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);
    box-shadow:0 0 0 .18rem rgba(37,99,235,.12);

}


/*==========================================
  Textarea
==========================================*/

textarea.form-control{

    height:auto;
    min-height:130px;
    resize:vertical;

}


/*==========================================
  Input Group
==========================================*/

.input-group-text{

    background:var(--bg-light);
    border:1px solid var(--border);

}


/*==========================================
  Search Box
==========================================*/

.search-box{

    position:relative;

}

.search-box .form-control{

    padding-left:42px;

}

.search-box i{

    position:absolute;
    top:50%;
    left:15px;

    transform:translateY(-50%);

    color:var(--text-light);

}


/*==========================================
  Validation
==========================================*/

.is-valid{

    border-color:var(--success)!important;

}

.is-invalid{

    border-color:var(--danger)!important;

}


/*==========================================
  Mobile
==========================================*/

@media(max-width:768px){

    .form-control,
    .form-select{

        height:46px;
        font-size:14px;

    }

}
/* cards.css */
/*==================================================
  RechargePlanInfo.in
  Cards
  File: assets/css/components/cards.css
==================================================*/


/*==========================================
  Base Card
==========================================*/

.card{

    position:relative;

    background:var(--white);

    border:none;

    border-radius:16px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


/*==========================================
  Card Body
==========================================*/

.card-body{

    padding:22px;

}


/*==========================================
  Card Header
==========================================*/

.card-header{

    background:transparent;

    border-bottom:1px solid var(--border);

    padding:18px 22px;

    font-weight:var(--fw-bold);

}


/*==========================================
  Card Footer
==========================================*/

.card-footer{

    background:transparent;

    border-top:1px solid var(--border);

    padding:18px 22px;

}


/*==========================================
  Compact Card
==========================================*/

.card-compact .card-body{

    padding:16px;

}


/*==========================================
  Flat Card
==========================================*/

.card-flat{

    box-shadow:none;

    border:1px solid var(--border);

}


/*==========================================
  Border Card
==========================================*/

.card-bordered{

    border:1px solid var(--border);

}


/*==========================================
  White Card
==========================================*/

.card-white{

    background:var(--white);

}


/*==========================================
  Mobile
==========================================*/

@media(max-width:768px){

    .card-body{

        padding:18px;

    }

    .card-header,
    .card-footer{

        padding:16px 18px;

    }

}
/* operator-card.css */
/*==================================================
  RechargePlanInfo.in
  Operator Card
  File: assets/css/components/operator-card.css
==================================================*/


/*==========================================
  Grid
==========================================*/

.operator-grid{

    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:16px;

}


/*==========================================
  Card
==========================================*/

.operator-card{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:18px 12px;

    text-align:center;

    transition:var(--transition);

}

.operator-card:hover{

    border-color:var(--primary);

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}


/*==========================================
  Logo
==========================================*/

.operator-logo{

    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:10px;

}

.operator-logo img{

    width:42px;
    height:42px;

    object-fit:contain;

}


/*==========================================
  Name
==========================================*/

.operator-name{

    font-size:13px;

    font-weight:var(--fw-semibold);

    color:var(--heading);

    line-height:1.4;

}


/*==========================================
  Plans Count
==========================================*/

.operator-count{

    margin-top:6px;

    font-size:11px;

    color:var(--text-light);

}


/*==========================================
  Responsive
==========================================*/

@media(max-width:992px){

    .operator-grid{

        grid-template-columns:repeat(5,1fr);

    }

}

@media(max-width:768px){

    .operator-grid{

        grid-template-columns:repeat(4,1fr);

        gap:12px;

    }

    .operator-card{

        padding:14px 10px;

    }

    .operator-logo{

        width:48px;
        height:48px;

    }

    .operator-logo img{

        width:34px;
        height:34px;

    }

    .operator-name{

        font-size:12px;

    }

}

@media(max-width:480px){

    .operator-grid{

        gap:10px;

    }

    .operator-card{

        padding:12px 8px;

    }

    .operator-logo{

        width:42px;
        height:42px;

    }

    .operator-logo img{

        width:30px;
        height:30px;

    }

    .operator-name{

        font-size:11px;

    }

}
/* plan-card.css */
/*==================================================
  RechargePlanInfo.in
  Plan Card
  File: assets/css/components/plan-card.css
  Part 1
==================================================*/


/*==========================================
  Grid
==========================================*/

.plan-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}


/*==========================================
  Card
==========================================*/

.plan-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.plan-card:hover{

    border-color:var(--primary);

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}


/*==========================================
  Body
==========================================*/

.plan-card .card-body{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:18px;

}


/*==========================================
  Header
==========================================*/

.plan-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

    margin-bottom:16px;

}


/*==========================================
  Operator
==========================================*/

.plan-operator{

    display:flex;

    align-items:center;

    gap:10px;

}

.plan-operator-logo{

    width:38px;

    height:38px;

    border-radius:50%;

    object-fit:contain;

}

.plan-operator-info{

    display:flex;

    flex-direction:column;

}

.plan-operator-name{

    font-size:14px;

    font-weight:var(--fw-bold);

    color:var(--heading);

}

.plan-circle{

    font-size:11px;

    color:var(--text-light);

}
/*==========================================
  Base Badge
==========================================*/

.badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 10px;

    border-radius:var(--radius-pill);

    font-size:11px;

    font-weight:var(--fw-semibold);

    line-height:1;

}


/*==========================================
  Primary
==========================================*/

.badge-primary{

    background:var(--primary-light);

    color:var(--primary);

}


/*==========================================
  Success
==========================================*/

.badge-success{

    background:var(--success-light);

    color:var(--success);

}


/*==========================================
  Danger
==========================================*/

.badge-danger{

    background:var(--danger-light);

    color:var(--danger);

}


/*==========================================
  Warning
==========================================*/

.badge-warning{

    background:var(--warning-light);

    color:var(--warning);

}


/*==========================================
  Popular
==========================================*/

.badge-popular{
    background:#ea580c;
    color:#ffffff;
    border:0;
}


/*==========================================
  Recommended
==========================================*/

.badge-recommended{

    background:#dcfce7;

    color:#16a34a;

}


/*==========================================
  New
==========================================*/

.badge-new{

    background:#e0f2fe;

    color:#0284c7;

}


/*==========================================
  Outline
==========================================*/

.badge-outline{

    background:transparent;

    border:1px solid var(--border);

    color:var(--heading);

}


/*==========================================
  Rounded Square
==========================================*/

.badge-rounded{

    border-radius:10px;

}


/*==========================================
  Small
==========================================*/

.badge-sm{

    padding:4px 8px;

    font-size:10px;

}


/*==========================================
  Large
==========================================*/

.badge-lg{

    padding:7px 14px;

    font-size:13px;

}

/*==========================================
  Badge Area
==========================================*/

.plan-badges{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:6px;

}


/*==========================================
  Price
==========================================*/

.plan-price{

    margin-bottom:14px;

}

.plan-price small{

    font-size:18px;

    font-weight:600;

    color:var(--primary);

}

.plan-price strong{

    font-size:40px;

    font-weight:800;

    color:var(--primary);

    line-height:1;

}


/*==========================================
  Validity
==========================================*/

.plan-validity{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px 12px;

    margin-bottom:18px;

    background:var(--primary-light);

    border-radius:30px;

    color:var(--primary);

    font-size:12px;

    font-weight:600;

}


/*==========================================
  Plan Name
==========================================*/

.plan-name{

    margin-bottom:16px;

    color:var(--heading);

    font-size:17px;

    font-weight:700;

    line-height:1.45;

    min-height:48px;

}


/*==========================================
  Divider
==========================================*/

.plan-divider{

    height:1px;

    margin:15px 0;

    background:var(--border);

}

/*==========================================
  Features
==========================================*/

.plan-features{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:20px;

}

.plan-feature{

    display:flex;

    align-items:flex-start;

    gap:10px;

    padding-bottom:10px;

    border-bottom:1px dashed var(--border);

    font-size:13px;

    color:var(--text);

}

.plan-feature:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.plan-feature i{

    width:18px;

    margin-top:2px;

    color:var(--primary);

    flex-shrink:0;

}

/*==================================================
  RechargePlanInfo.in
  Category Pills
  File: assets/css/components/category-pill.css
==================================================*/


/*==========================================
  Wrapper
==========================================*/

.category-pills{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


/*==========================================
  Pill
==========================================*/

.category-pill{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius-pill);

    color:var(--heading);

    font-size:14px;

    font-weight:var(--fw-semibold);

    white-space:nowrap;

    transition:var(--transition);

}


/*==========================================
  Icon
==========================================*/

.category-pill i{

    font-size:15px;

}


/*==========================================
  Hover
==========================================*/

.category-pill:hover{

    background:var(--primary);

    color:var(--white);

    border-color:var(--primary);

}


/*==========================================
  Active
==========================================*/

.category-pill.active{

    background:var(--primary);

    color:var(--white);

    border-color:var(--primary);

}


/*==========================================
  Badge
==========================================*/

.category-pill .badge{

    background:rgba(255,255,255,.15);

    border-radius:50px;

    padding:4px 8px;

    font-size:11px;

    font-weight:var(--fw-semibold);

}


/*==========================================
  Responsive
==========================================*/

@media(max-width:768px){

    .category-pills{

        gap:8px;

    }

    .category-pill{

        padding:8px 14px;

        font-size:13px;

    }

}

@media(max-width:480px){

    .category-pill{

        padding:7px 12px;

        font-size:12px;

    }

}
/*==================================================
  RechargePlanInfo.in
  Feature Chips
  File: assets/css/components/feature-chip.css
==================================================*/


/*==========================================
  Wrapper
==========================================*/

.feature-chips{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}


/*==========================================
  Chip
==========================================*/

.feature-chip{

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 14px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    color:var(--heading);

    font-size:13px;

    font-weight:var(--fw-medium);

    transition:var(--transition);

}


/*==========================================
  Hover
==========================================*/

.feature-chip:hover{

    border-color:var(--primary);

    background:var(--primary-light);

}


/*==========================================
  Icon
==========================================*/

.feature-chip i{

    color:var(--primary);

    font-size:16px;

    flex-shrink:0;

}


/*==========================================
  Text
==========================================*/

.feature-chip span{

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}


/*==========================================
  Success
==========================================*/

.feature-chip.success{

    background:var(--success-light);

    border-color:rgba(22,163,74,.20);

}

.feature-chip.success i{

    color:var(--success);

}


/*==========================================
  Warning
==========================================*/

.feature-chip.warning{

    background:var(--warning-light);

    border-color:rgba(245,158,11,.20);

}

.feature-chip.warning i{

    color:var(--warning);

}


/*==========================================
  Danger
==========================================*/

.feature-chip.danger{

    background:var(--danger-light);

    border-color:rgba(220,38,38,.20);

}

.feature-chip.danger i{

    color:var(--danger);

}


/*==========================================
  Mobile
==========================================*/

@media(max-width:768px){

    .feature-chip{

        padding:8px 12px;

        font-size:12px;

        gap:8px;

    }

    .feature-chip i{

        font-size:15px;

    }

}

/*==========================================
  Description
==========================================*/

.plan-description{

    margin-bottom:20px;

    color:var(--text-light);

    font-size:13px;

    line-height:1.7;

}


/*==========================================
  Footer
==========================================*/

.plan-footer{

    margin-top:auto;

    padding-top:16px;

    border-top:1px solid var(--border);

}


/*==========================================
  CTA Button
==========================================*/

.plan-card .btn{

    width:100%;

    border-radius:30px;

    padding:12px;

    font-size:14px;

    font-weight:var(--fw-semibold);

}


/*==========================================
  Highlight Card
==========================================*/

.plan-card.featured{

    border-color:var(--primary);

    box-shadow:0 12px 30px rgba(37,99,235,.15);

}

.plan-card.featured::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

}


/*==========================================
  Equal Height
==========================================*/

.plan-card,
.plan-card .card-body{

    height:100%;

}


/*==========================================
  Tablet
==========================================*/

@media(max-width:991px){

    .plan-grid{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

    }

}


/*==========================================
  Mobile
==========================================*/

@media(max-width:768px){

    .plan-grid{

        grid-template-columns:1fr;

        gap:14px;

    }

    .plan-card{

        border-radius:16px;

    }

    .plan-card .card-body{

        padding:16px;

    }

    .plan-header{

        margin-bottom:14px;

    }

    .plan-operator-logo{

        width:34px;

        height:34px;

    }

    .plan-operator-name{

        font-size:13px;

    }

    .plan-price strong{

        font-size:32px;

    }

    .plan-price small{

        font-size:16px;

    }

    .plan-name{

        min-height:auto;

        font-size:15px;

        margin-bottom:14px;

    }

    .plan-feature{

        font-size:12px;

        gap:8px;

    }

    .plan-validity{

        font-size:11px;

        padding:5px 10px;

    }

}


/*==========================================
  Small Mobile
==========================================*/

@media(max-width:480px){

    .plan-card{

        border-radius:14px;

    }

    .plan-card .card-body{

        padding:14px;

    }

    .plan-header{

        gap:8px;

    }

    .plan-price strong{

        font-size:28px;

    }

    .plan-price{

        margin-bottom:12px;

    }

    .plan-name{

        font-size:14px;

    }

    .plan-description{

        font-size:12px;

    }

    .plan-card .btn{

        padding:10px;

        font-size:13px;

    }

}
/* home.css */
/*==================================================
  RechargePlanInfo.in
  Home Page
  File: assets/css/pages/home.css
==================================================*/


/*==========================================
  Hero Section
==========================================*/

.home-hero{

    padding:30px 0 20px;

}

.home-hero-box{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow-sm);

}


/*==========================================
  Hero Title
==========================================*/

.home-title{

    margin-bottom:10px;

    color:var(--heading);

    font-size:36px;

    font-weight:var(--fw-extrabold);

}

.home-subtitle{

    max-width:700px;

    color:var(--text-light);

    margin-bottom:24px;

}


/*==========================================
  Search
==========================================*/

.home-search{

    display:flex;

    gap:12px;

}

.home-search .form-control{

    height:52px;

}

.home-search .btn{

    min-width:140px;

}


/*==========================================
  Quick Stats
==========================================*/

.home-stats{

    display:flex;

    gap:16px;

    margin-top:30px;

}

.home-stat{

    flex:1;

    padding:18px;

    background:var(--bg-light);

    border-radius:var(--radius);

    text-align:center;

}

.home-stat strong{

    display:block;

    font-size:26px;

    color:var(--primary);

}

.home-stat span{

    font-size:13px;

    color:var(--text-light);

}


/*==========================================
  Home Section
==========================================*/

.home-section{

    margin-top:40px;

}

.home-section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.home-section-title{

    font-size:28px;

    font-weight:var(--fw-extrabold);

}

.home-view-all{

    color:var(--primary);

    font-weight:600;

}

.home-view-all:hover{

    text-decoration:underline;

}


/*==========================================
  Home Box
==========================================*/

.home-box{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:18px;

    padding:24px;

}


/*==========================================
  Responsive
==========================================*/

@media(max-width:768px){

    .home-hero-box{

        padding:20px;

    }

    .home-title{

        font-size:28px;

        text-align:center;

    }

    .home-subtitle{

        text-align:center;

    }

    .home-search{

        flex-direction:column;

    }

    .home-search .btn{

        width:100%;

    }

    .home-stats{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

    .home-section-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}

@media(max-width:480px){

    .home-title{

        font-size:24px;

    }

    .home-stat{

        padding:14px;

    }

    .home-stat strong{

        font-size:22px;

    }

}
/* operator.css */
/*==================================================
  RechargePlanInfo.in
  Operator Page
  File: assets/css/pages/operator.css
==================================================*/


/*==========================================
  Hero
==========================================*/

.operator-hero{

    margin-bottom:35px;

}

.operator-hero-box{

    display:flex;

    align-items:center;

    gap:20px;

    padding:28px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:20px;

}

.operator-logo{

    width:80px;

    height:80px;

    object-fit:contain;

}

.operator-title{

    margin-bottom:6px;

    font-size:34px;

    font-weight:var(--fw-extrabold);

}

.operator-description{

    color:var(--text-light);

}


/*==========================================
  Operator Info
==========================================*/

.operator-info{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:18px;

}

.operator-info-item{

    padding:8px 14px;

    background:var(--primary-light);

    border-radius:var(--radius-pill);

    font-size:13px;

    font-weight:600;

}


/*==========================================
  Category Section
==========================================*/

.operator-category{

    margin-top:40px;

}


/*==========================================
  FAQ
==========================================*/

.operator-faq{

    margin-top:50px;

}


/*==========================================
  Responsive
==========================================*/

@media(max-width:768px){

    .operator-hero-box{

        flex-direction:column;

        text-align:center;

        padding:22px;

    }

    .operator-logo{

        width:64px;

        height:64px;

    }

    .operator-title{

        font-size:26px;

    }

    .operator-info{

        justify-content:center;

    }

}
/* prepaid.css */


/*==========================================
  Hero
==========================================*/

.prepaid-hero{
    margin-bottom:32px;
}

.prepaid-hero-box{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px;
    box-shadow:var(--shadow-sm);
}

.prepaid-title{
    margin-bottom:8px;
    font-size:34px;
    font-weight:var(--fw-extrabold);
}

.prepaid-subtitle{
    color:var(--text-light);
}


/*==========================================
  Circle List
==========================================*/

.circle-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.circle-card{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
    padding:12px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    font-size:14px;
    font-weight:var(--fw-semibold);
    transition:var(--transition);
}

.circle-card:hover{
    border-color:var(--primary);
    background:var(--primary-light);
    color:var(--primary);
}


/*==========================================
  About
==========================================*/

.prepaid-about{
    margin-top:40px;
}

.prepaid-about-box{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:18px;
    padding:26px;
}


/*==========================================
  FAQ
==========================================*/

.prepaid-faq{
    margin-top:50px;
}


/*==========================================
  People Search
==========================================*/

.people-search{
    margin-top:45px;
}


/*==========================================
  Responsive
==========================================*/

@media(max-width:992px){

    .circle-list{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:768px){

    .prepaid-hero-box{
        padding:22px;
    }

    .prepaid-title{
        font-size:28px;
    }

    .circle-list{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:480px){

    .circle-list{
        grid-template-columns:1fr;
    }

    .prepaid-title{
        font-size:24px;
    }

}
/* plan.css */



/*==========================================
  Hero
==========================================*/

.plan-hero{
    margin-bottom:35px;
}

.plan-hero-box{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px;
    box-shadow:var(--shadow-sm);
}


/*==========================================
  Price
==========================================*/

.plan-hero-price{
    font-size:52px;
    font-weight:800;
    color:var(--primary);
    line-height:1;
}


/*==========================================
  Validity
==========================================*/

.plan-hero-validity{
    display:inline-block;
    margin-top:10px;
    padding:8px 14px;
    background:var(--primary-light);
    border-radius:30px;
    color:var(--primary);
    font-size:13px;
    font-weight:600;
}


/*==========================================
  Benefits
==========================================*/

.plan-benefits{
    margin-top:35px;
}

.plan-benefit-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
}

.plan-benefit-item:last-child{
    border-bottom:none;
}

.plan-benefit-item i{
    color:var(--primary);
    font-size:18px;
}


/*==========================================
  Description
==========================================*/

.plan-description-box{
    margin-top:40px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
}


/*==========================================
  Similar Plans
==========================================*/

.similar-plans{
    margin-top:50px;
}


/*==========================================
  FAQ
==========================================*/

.plan-faq{
    margin-top:50px;
}


/*==========================================
  Responsive
==========================================*/

@media(max-width:768px){

    .plan-hero-box{
        padding:22px;
    }

    .plan-hero-price{
        font-size:40px;
    }

    .plan-description-box{
        padding:18px;
    }

}

@media(max-width:480px){

    .plan-hero-price{
        font-size:34px;
    }

}
/* responsive.css */

/*==================================================
  RechargePlanInfo.in
  Global Responsive
  File: assets/css/mobile/responsive.css
==================================================*/


/*==================================================
  Large Desktop
==================================================*/

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

}


/*==================================================
  Laptop
==================================================*/

@media (max-width:1200px){

    .section{
        padding:35px 0;
    }

}


/*==================================================
  Tablet Landscape
==================================================*/

@media (max-width:992px){

    .section{
        padding:32px 0;
    }

    .section-title{
        font-size:28px;
    }

}


/*==================================================
  Tablet
==================================================*/

@media (max-width:768px){

    body{

        font-size:14px;

    }

    .section{

        padding:28px 0;

    }

    .section-title{

        font-size:24px;

    }

    .section-subtitle{

        font-size:14px;

    }

    .text-center-mobile{

        text-align:center !important;

    }

    .text-left-mobile{

        text-align:left !important;

    }

    .w-mobile-100{

        width:100% !important;

    }

    .hide-tablet{

        display:none !important;

    }

}
/*==================================================
 Animations
==================================================*/



/*==========================================
  Global Transition
==========================================*/

a,
button,
.btn,
.card,
img,
input,
textarea,
select{
    transition:var(--transition);
}


/*==========================================
  Card Hover
==========================================*/

.card-hover{
    transition:var(--transition);
}

.card-hover:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}


/*==========================================
  Lift Hover
==========================================*/

.hover-lift{
    transition:var(--transition);
}

.hover-lift:hover{
    transform:translateY(-3px);
}


/*==========================================
  Scale Hover
==========================================*/

.hover-scale{
    transition:var(--transition);
}

.hover-scale:hover{
    transform:scale(1.03);
}


/*==========================================
  Image Zoom
==========================================*/

.img-zoom{
    overflow:hidden;
}

.img-zoom img{
    transition:var(--transition-slow);
}

.img-zoom:hover img{
    transform:scale(1.08);
}


/*==========================================
  Rotate Hover
==========================================*/

.hover-rotate{
    transition:var(--transition);
}

.hover-rotate:hover{
    transform:rotate(3deg);
}


/*==========================================
  Fade
==========================================*/

.fade-in{
    animation:fadeIn .4s ease forwards;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/*==========================================
  Slide Up
==========================================*/

.slide-up{
    animation:slideUp .4s ease forwards;
}

@keyframes slideUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/*==========================================
  Slide Down
==========================================*/

.slide-down{
    animation:slideDown .4s ease forwards;
}

@keyframes slideDown{

    from{
        opacity:0;
        transform:translateY(-20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/*==========================================
  Slide Left
==========================================*/

.slide-left{
    animation:slideLeft .45s ease forwards;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(25px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


/*==========================================
  Slide Right
==========================================*/

.slide-right{
    animation:slideRight .45s ease forwards;
}

@keyframes slideRight{

    from{
        opacity:0;
        transform:translateX(-25px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


/*==========================================
  Pulse
==========================================*/

.pulse{
    animation:pulse 1.8s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}


/*==========================================
  Floating
==========================================*/

.float{
    animation:float 4s ease-in-out infinite;
}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}


/*==========================================
  Spin
==========================================*/

.spin{
    animation:spin 1s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/*==========================================
  Fade Hover
==========================================*/

.hover-fade{
    transition:var(--transition);
}

.hover-fade:hover{
    opacity:.8;
}


/*==========================================
  Button Press
==========================================*/

.btn:active{
    transform:scale(.98);
}


/*==========================================
  Disable Animation
==========================================*/

.no-animation{
    animation:none !important;
    transition:none !important;
}


/*==========================================
  Accessibility
==========================================*/

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*==================================================
  Mobile
==================================================*/

@media (max-width:576px){

    .container{

        padding-left:14px;

        padding-right:14px;

    }

    .section{

        padding:24px 0;

    }

    .section-title{

        font-size:22px;

    }

    .section-subtitle{

        font-size:13px;

    }

    .mobile-stack{

        display:flex;

        flex-direction:column;

        gap:12px;

    }

    .mobile-scroll{

        overflow-x:auto;

        scrollbar-width:none;

    }

    .mobile-scroll::-webkit-scrollbar{

        display:none;

    }

    .hide-mobile{

        display:none !important;

    }

    .show-mobile{

        display:block !important;

    }

}


/*==================================================
  Small Mobile
==================================================*/

@media (max-width:480px){

    body{

        font-size:13px;

    }

    .section{

        padding:20px 0;

    }

    .section-title{

        font-size:20px;

    }

    .section-subtitle{

        font-size:12px;

    }

    .mobile-center{

        text-align:center !important;

    }

    .mobile-full{

        width:100% !important;

    }

    .mobile-gap{

        gap:10px !important;

    }

}


/*==================================================
  Extra Small
==================================================*/

@media (max-width:360px){

    .container{

        padding-left:10px;

        padding-right:10px;

    }

    .section-title{

        font-size:18px;

    }

}


/*==================================================
  Landscape Mobile
==================================================*/

@media (max-height:500px) and (orientation:landscape){

    .section{

        padding:18px 0;

    }

}


/*==================================================
  Touch Devices
==================================================*/

@media (hover:none){

    .hover-only:hover{

        transform:none !important;

        box-shadow:none !important;

    }

}


/*==================================================
  Reduced Motion
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================
   CLS Fix - Operator Logos
========================================== */

.operator-logo{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    overflow:hidden;
}

.operator-logo img{
    display:block;
    width:42px;
    height:42px;
    object-fit:contain;
}

/* Tablet */
@media (max-width:768px){

    .operator-logo{
        width:48px;
        height:48px;
    }

    .operator-logo img{
        width:34px;
        height:34px;
    }

}

/* Mobile */
@media (max-width:480px){

    .operator-logo{
        width:42px;
        height:42px;
    }

    .operator-logo img{
        width:30px;
        height:30px;
    }

}