/*==========================================================
    BANKHELPLINE LANDING CSS
    Version : 2.0
    Author  : BankHelpline
==========================================================*/


/*==========================================================
    GOOGLE FONT
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/*==========================================================
    ROOT VARIABLES
==========================================================*/

:root{

    --primary:#E30613;
    --primary-dark:#B0000F;
    --secondary:#111827;

    --white:#ffffff;

    --light:#F8FAFC;
    --light-2:#F1F5F9;

    --border:#E2E8F0;

    --text:#475569;

    --heading:#0F172A;

    --success:#10B981;

    --radius-sm:12px;
    --radius:18px;
    --radius-lg:24px;

    --shadow-sm:0 5px 18px rgba(15,23,42,.05);

    --shadow:
    0 15px 45px rgba(15,23,42,.08);

    --shadow-lg:
    0 30px 70px rgba(15,23,42,.12);

    --transition:.35s ease;

}



/*==========================================================
RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:#fff;

    color:var(--text);

    font-size:17px;

    line-height:1.8;

    overflow-x:hidden;

}



/*==========================================================
TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4,h5,h6{

    color:var(--heading);

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}

h1{

    font-size:58px;

}

h2{

    font-size:42px;

}

h3{

    font-size:30px;

}

h4{

    font-size:24px;

}

p{

    color:var(--text);

    margin-bottom:18px;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

}



/*==========================================================
SECTION
==========================================================*/

section{

    position:relative;

    padding:100px 0;

}

.section-heading{

    max-width:850px;

    margin:auto;

    margin-bottom:60px;

}

.section-heading span{

    display:inline-block;

    background:#FFF1F2;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    padding:8px 18px;

    border-radius:40px;

    margin-bottom:18px;

    text-transform:uppercase;

}

.section-heading h2{

    margin-bottom:20px;

}

.section-heading p{

    font-size:18px;

}



/*==========================================================
BUTTONS
==========================================================*/

.btn{

    border-radius:14px;

    padding:15px 34px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.btn-outline-dark{

    border:2px solid var(--secondary);

}

.btn-outline-dark:hover{

    background:var(--secondary);

    color:#fff;

    transform:translateY(-3px);

}



/*==========================================================
HERO
==========================================================*/

.hero-section{

    padding-top:70px;

    padding-bottom:70px;

    background:
    linear-gradient(180deg,#FFF 0%,#FFF8F8 100%);

    overflow:hidden;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#FFF1F2;

    color:var(--primary);

    padding:10px 18px;

    border-radius:40px;

    font-size:15px;

    font-weight:700;

    margin-bottom:28px;

}

.hero-section h1{

    margin-bottom:25px;

    max-width:720px;

}

.hero-section h1 span{

    color:var(--primary);

}

.hero-description{

    font-size:19px;

    max-width:650px;

    margin-bottom:35px;

}



/*==========================================================
HERO BENEFITS
==========================================================*/

.hero-benefits{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.hero-benefits div{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:var(--heading);

}

.hero-benefits i{

    color:var(--success);

    font-size:18px;

}



/*==========================================================
CTA BUTTONS
==========================================================*/

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}



/*==========================================================
TRUST STRIP
==========================================================*/

.trust-strip{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    background:#fff;

    padding:18px 24px;

    border-radius:18px;

    margin-bottom:55px;

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

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:700;

    color:var(--heading);

}

.trust-item i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#FFF1F2;

    color:var(--primary);

}



/*==========================================================
STATS
==========================================================*/

.hero-stats{

    display:grid;

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

    gap:18px;

    margin-top:30px;

}

.stat-card{

    background:#fff;

    border-radius:20px;

    text-align:center;

    padding:28px 20px;

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

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.stat-card h3{

    font-size:36px;

    color:var(--primary);

    margin-bottom:6px;

}

.stat-card small{

    color:var(--text);

    font-size:15px;

    font-weight:600;

}
/*==========================================================
LEAD FORM
==========================================================*/

.lead-form-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 25px 60px rgba(15,23,42,.10);

    border:1px solid #EEF2F7;

    position:relative;

    overflow:hidden;

}

.lead-form-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,var(--primary),#ff4d4f);

}

.form-header{

    text-align:center;

    margin-bottom:30px;

}

.form-header h2{

    font-size:32px;

    margin-bottom:10px;

}

.form-header p{

    font-size:15px;

    color:#64748B;

    margin-bottom:0;

}



/*==========================================================
FORM CONTROLS
==========================================================*/

.lead-form-card label{

    font-weight:700;

    color:var(--heading);

    margin-bottom:8px;

    font-size:15px;

}

.lead-form-card .form-control,

.lead-form-card .form-select{

    height:54px;

    border-radius:14px;

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

    font-size:15px;

    padding:0 18px;

    box-shadow:none;

    transition:.3s;

    background:#fff;

}

.lead-form-card textarea{

    border-radius:16px;

    padding:15px;

    min-height:120px;

}

.lead-form-card .form-control:focus,

.lead-form-card .form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .18rem rgba(227,6,19,.12);

}

.lead-form-card .btn{

    height:58px;

    font-size:17px;

    font-weight:700;

}



/*==========================================================
SECURE STRIP
==========================================================*/

.secure-strip{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #EDF2F7;

}

.secure-strip div{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#64748B;

    font-weight:600;

}

.secure-strip i{

    color:var(--success);

}



/*==========================================================
PRODUCT PREVIEW
==========================================================*/

.products-preview{

    background:#fff;

}

.product-card{

    background:#fff;

    border:1px solid #EEF2F7;

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.35s;

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

    position:relative;

    overflow:hidden;

}

.product-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:var(--primary);

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.product-card:hover::after{

    width:100%;

}

.product-card i{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF1F2;

    color:var(--primary);

    font-size:28px;

    margin-bottom:25px;

    transition:.35s;

}

.product-card:hover i{

    transform:rotate(-8deg) scale(1.08);

}

.product-card h4{

    font-size:24px;

    margin-bottom:15px;

}

.product-card p{

    margin-bottom:0;

}



/*==========================================================
COMMON FEATURE CARD
==========================================================*/

.feature-box{

    background:#fff;

    border:1px solid #EEF2F7;

    border-radius:20px;

    padding:28px;

    display:flex;

    gap:22px;

    align-items:flex-start;

    height:100%;

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.feature-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF1F2;

    color:var(--primary);

    font-size:28px;

}

.feature-box h4{

    margin-bottom:12px;

    font-size:22px;

}

.feature-box p{

    margin-bottom:0;

}



/*==========================================================
COMMON ICON CARD
==========================================================*/

.network-card,

.industry-card,

.solution-card,

.benefit-card{

    background:#fff;

    border:1px solid #EEF2F7;

    border-radius:20px;

    text-align:center;

    padding:35px 25px;

    transition:.35s;

    height:100%;

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

}

.network-card:hover,

.industry-card:hover,

.solution-card:hover,

.benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.network-card i,

.industry-card i,

.solution-card i,

.benefit-card i,

.industry-icon,

.solution-icon{

    width:74px;

    height:74px;

    border-radius:20px;

    margin:auto;

    margin-bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF1F2;

    color:var(--primary);

    font-size:30px;

}

.network-card h5,

.industry-card h5,

.solution-card h5,

.benefit-card h5{

    margin-bottom:10px;

    font-size:21px;

}

.network-card p{

    margin-bottom:0;

}



/*==========================================================
COMMON CARD HOVER
==========================================================*/

.product-card,

.feature-box,

.network-card,

.industry-card,

.solution-card,

.benefit-card{

    cursor:pointer;

}

.product-card:hover,

.feature-box:hover,

.network-card:hover,

.industry-card:hover,

.solution-card:hover,

.benefit-card:hover{

    border-color:#FECACA;

}



/*==========================================================
LIGHT BACKGROUND SECTION
==========================================================*/

.why-us,

.industries{

    background:#F8FAFC;

}

.bank-network,

.funding-solutions{

    background:#fff;

}
/*==========================================================
ELIGIBILITY
==========================================================*/

.eligibility{

    background:#F8FAFC;

}

.eligibility-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    border:1px solid #E8EDF3;

    height:100%;

    transition:.35s;

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

}

.eligibility-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

    border-color:#FFD4D4;

}

.eligibility-card i{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#FFF1F2;

    color:var(--primary);

    font-size:30px;

    margin-bottom:25px;

}

.eligibility-card h4{

    margin-bottom:18px;

}

.eligibility-card ul{

    padding-left:18px;

    margin:0;

}

.eligibility-card li{

    padding:8px 0;

    color:#475569;

}



/*==========================================================
DOCUMENTS
==========================================================*/

.documents{

    background:#fff;

}

.document-card{

    background:#fff;

    border:1px solid #E8EDF3;

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.35s;

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

}

.document-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.document-card h4{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:25px;

}

.document-card h4 i{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#FFF1F2;

    color:var(--primary);

    font-size:24px;

}

.document-card ul{

    margin:0;

    padding-left:20px;

}

.document-card li{

    padding:8px 0;

    color:#475569;

    transition:.3s;

}

.document-card li:hover{

    color:var(--primary);

    padding-left:6px;

}



/*==========================================================
PROCESS
==========================================================*/

.process-section{

    background:#F8FAFC;

}

.process-card{

    background:#fff;

    border-radius:22px;

    padding:40px 25px;

    text-align:center;

    position:relative;

    border:1px solid #E8EDF3;

    transition:.35s;

    height:100%;

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

}

.process-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow);

}

.process-number{

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    font-size:16px;

}

.process-card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:20px auto;

    border-radius:22px;

    background:#FFF1F2;

    color:var(--primary);

    font-size:34px;

}

.process-card h4{

    margin-bottom:15px;

}

.process-card p{

    margin-bottom:0;

}



/*==========================================================
BENEFITS
==========================================================*/

.benefits{

    background:#fff;

}

.benefit-card{

    text-align:center;

    background:#fff;

    border-radius:22px;

    padding:35px;

    border:1px solid #E8EDF3;

    transition:.35s;

    height:100%;

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

}

.benefit-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.benefit-card i{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:22px;

    border-radius:18px;

    background:#FFF1F2;

    color:var(--primary);

    font-size:30px;

}

.benefit-card h5{

    margin:0;

}



/*==========================================================
MID CTA
==========================================================*/

.cta-section{

    padding:90px 0;

    background:#F8FAFC;

}

.cta-box{

    background:linear-gradient(135deg,#E30613,#B0000F);

    color:#fff;

    padding:55px;

    border-radius:28px;

    overflow:hidden;

    position:relative;

}

.cta-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:-100px;

    top:-100px;

    border-radius:50%;

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

}

.cta-box::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    left:-50px;

    bottom:-50px;

    border-radius:50%;

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

}

.cta-box h2{

    color:#fff;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

.cta-box p{

    color:rgba(255,255,255,.88);

    margin-bottom:0;

    position:relative;

    z-index:2;

}

.cta-box .btn{

    position:relative;

    z-index:2;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    border:none;

}

.cta-box .btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}



/*==========================================================
LIST STYLING
==========================================================*/

.document-card ul,

.eligibility-card ul{

    list-style:none;

    padding-left:0;

}

.document-card li,

.eligibility-card li{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.document-card li::before,

.eligibility-card li::before{

    content:"✓";

    color:#10B981;

    font-weight:700;

    margin-top:2px;

}
/*==========================================================
TESTIMONIALS
==========================================================*/

.testimonials{

    background:#fff;

}

.testimonial-card{

    background:#fff;

    border:1px solid #E8EDF3;

    border-radius:24px;

    padding:35px;

    height:100%;

    transition:.35s;

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

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.stars{

    color:#F59E0B;

    margin-bottom:20px;

    font-size:18px;

}

.testimonial-card p{

    font-size:16px;

    color:#475569;

    font-style:italic;

    min-height:120px;

}

.client{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}

.client-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFF1F2;

    color:var(--primary);

    font-size:24px;

}

.client strong{

    display:block;

    color:var(--heading);

}

.client small{

    color:#64748B;

}


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

.faq-section{

    background:#F8FAFC;

}

.accordion{

    max-width:900px;

    margin:auto;

}

.accordion-item{

    border:none;

    margin-bottom:18px;

    border-radius:18px !important;

    overflow:hidden;

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

}

.accordion-button{

    padding:22px 26px;

    font-size:18px;

    font-weight:700;

    background:#fff;

    color:var(--heading);

    box-shadow:none !important;

}

.accordion-button:not(.collapsed){

    background:#FFF1F2;

    color:var(--primary);

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:24px 28px;

    color:#475569;

    line-height:1.9;

    background:#fff;

}


/*==========================================================
FINAL CTA
==========================================================*/

.final-cta{

    background:linear-gradient(180deg,#ffffff,#FFF8F8);

}

.cta-wrapper{

    max-width:900px;

    margin:auto;

    background:#fff;

    border-radius:28px;

    padding:70px 50px;

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

    position:relative;

    overflow:hidden;

}

.cta-wrapper::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-90px;

    top:-90px;

    border-radius:50%;

    background:rgba(227,6,19,.05);

}

.cta-badge{

    display:inline-block;

    background:#FFF1F2;

    color:var(--primary);

    padding:10px 20px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:20px;

}

.cta-wrapper h2{

    margin-bottom:20px;

}

.cta-wrapper p{

    max-width:650px;

    margin:0 auto 35px;

    font-size:18px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}


/*==========================================================
DISCLAIMER
==========================================================*/

.landing-disclaimer{

    padding:60px 0;

    background:#fff;

}

.landing-disclaimer .alert{

    border-radius:20px;

    padding:30px;

    font-size:15px;

    line-height:1.8;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

    color:#64748B;

}

.landing-disclaimer strong{

    color:var(--heading);

}


/*==========================================================
SECTION DIVIDERS
==========================================================*/

.products-preview,
.bank-network,
.documents,
.benefits,
.testimonials,
.final-cta{

    position:relative;

}

.products-preview::after,
.bank-network::after,
.documents::after,
.benefits::after,
.testimonials::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:120px;

    height:1px;

    background:#E5E7EB;

}


/*==========================================================
COMMON ICON HOVER
==========================================================*/

.feature-icon,
.solution-icon,
.industry-icon,
.network-card i,
.product-card i,
.process-card i,
.benefit-card i,
.client-icon{

    transition:.35s;

}

.feature-box:hover .feature-icon,
.solution-card:hover .solution-icon,
.industry-card:hover .industry-icon,
.network-card:hover i,
.product-card:hover i,
.process-card:hover i,
.benefit-card:hover i{

    transform:rotate(-8deg) scale(1.08);

}


/*==========================================================
COMMON CARD EFFECT
==========================================================*/

.product-card,
.feature-box,
.network-card,
.industry-card,
.solution-card,
.document-card,
.eligibility-card,
.process-card,
.benefit-card,
.testimonial-card{

    transition:all .35s ease;

}

.product-card:hover,
.feature-box:hover,
.network-card:hover,
.industry-card:hover,
.solution-card:hover,
.document-card:hover,
.eligibility-card:hover,
.process-card:hover,
.benefit-card:hover,
.testimonial-card:hover{

    border-color:#FFD5D8;

}


/*==========================================================
TEXT SELECTION
==========================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F1F5F9;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}
/*==========================================================
RESPONSIVE DESIGN
==========================================================*/

/*========================
1400px
========================*/

@media (max-width:1400px){

.hero-section h1{

    font-size:52px;

}

.container{

    max-width:1280px;

}

}


/*========================
1200px
========================*/

@media (max-width:1200px){

.hero-section{

    padding:70px 0;

}

.hero-section h1{

    font-size:46px;

}

.section-heading h2{

    font-size:38px;

}

.lead-form-card{

    padding:30px;

}

.hero-stats{

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

}

}


/*========================
992px
========================*/

@media (max-width:992px){

.hero-section{

    text-align:center;

}

.hero-description{

    margin:auto;

    margin-bottom:35px;

}

.hero-benefits{

    grid-template-columns:1fr;

    max-width:450px;

    margin:35px auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    margin-top:40px;

}

.lead-form-card{

    margin-top:50px;

}

.feature-box{

    text-align:left;

}

.section-heading{

    margin-bottom:45px;

}

.cta-box{

    text-align:center;

}

.cta-box .btn{

    margin-top:25px;

}

}


/*========================
768px
========================*/

@media (max-width:768px){

section{

    padding:75px 0;

}

.hero-section{

    padding-top:40px;

}

.hero-section h1{

    font-size:38px;

}

.hero-description{

    font-size:17px;

}

.section-heading h2{

    font-size:32px;

}

.section-heading p{

    font-size:16px;

}

.hero-stats{

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

    gap:15px;

}

.stat-card{

    padding:22px;

}

.lead-form-card{

    padding:25px;

}

.form-header h2{

    font-size:28px;

}

.feature-box{

    flex-direction:column;

    text-align:center;

}

.feature-icon{

    margin:auto;

}

.cta-wrapper{

    padding:50px 30px;

}

.cta-wrapper h2{

    font-size:34px;

}

}


/*========================
576px
========================*/

@media (max-width:576px){

.hero-section h1{

    font-size:32px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-stats{

    grid-template-columns:1fr;

}

.trust-strip{

    gap:12px;

    padding:18px;

}

.trust-item{

    width:100%;

    justify-content:flex-start;

}

.form-header h2{

    font-size:25px;

}

.section-heading h2{

    font-size:28px;

}

.process-card{

    margin-top:20px;

}

.cta-box{

    padding:35px;

}

}


/*========================
425px
========================*/

@media (max-width:425px){

.hero-section{

    padding-top:30px;

}

.hero-badge{

    font-size:13px;

}

.hero-section h1{

    font-size:28px;

}

.hero-description{

    font-size:16px;

}

.lead-form-card{

    padding:20px;

}

.btn{

    font-size:16px;

    height:52px;

}

.product-card,

.feature-box,

.network-card,

.solution-card,

.industry-card,

.document-card,

.eligibility-card,

.process-card,

.benefit-card,

.testimonial-card{

    padding:24px;

}

.cta-wrapper{

    padding:35px 22px;

}

}


/*========================
375px
========================*/

@media (max-width:375px){

.hero-section h1{

    font-size:26px;

}

.hero-description{

    font-size:15px;

}

.hero-benefits{

    gap:12px;

}

.hero-benefits div{

    font-size:14px;

}

.section-heading span{

    font-size:12px;

}

.section-heading h2{

    font-size:25px;

}

.lead-form-card{

    border-radius:18px;

}

.form-header h2{

    font-size:22px;

}

}


/*========================
320px
========================*/

@media (max-width:320px){

.hero-section h1{

    font-size:23px;

}

.hero-description{

    font-size:14px;

}

.section-heading h2{

    font-size:22px;

}

.btn{

    padding:14px 18px;

    font-size:15px;

}

.form-control,

.form-select{

    font-size:15px;

}

.hero-badge{

    padding:8px 14px;

}

}


/*==========================================================
COMMON UTILITIES
==========================================================*/

.shadow-hover{

    transition:.35s;

}

.shadow-hover:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.rounded-xl{

    border-radius:24px;

}

.bg-light-red{

    background:#FFF8F8;

}

.text-primary{

    color:var(--primary)!important;

}

.text-heading{

    color:var(--heading);

}

.border-light{

    border:1px solid #E8EDF3;

}


/*==========================================================
PRINT
==========================================================*/

@media print{

.hero-section,

.cta-section,

.final-cta{

    display:none;

}

body{

    background:#fff;

}

}
/*==========================================================
PREMIUM UX ENHANCEMENTS
Version 2.1
==========================================================*/


/*==========================================================
GRADIENT BACKGROUNDS
==========================================================*/

.hero-section{

    background:
    radial-gradient(circle at top right,
    rgba(227,6,19,.06),
    transparent 30%),

    radial-gradient(circle at bottom left,
    rgba(255,95,109,.04),
    transparent 35%),

    linear-gradient(180deg,#ffffff 0%,#FAFAFA 100%);

}


/*==========================================================
SECTION DIVIDER
==========================================================*/

section{

    position:relative;

}

section:not(:last-child)::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:140px;

    height:1px;

    transform:translateX(-50%);

    background:#ECEFF3;

}


/*==========================================================
FLOATING ICON EFFECT
==========================================================*/

.product-card i,
.feature-icon,
.network-card i,
.solution-icon,
.industry-icon,
.process-card i,
.benefit-card i{

    transition:.45s;

}

.product-card:hover i,
.feature-box:hover .feature-icon,
.network-card:hover i,
.solution-card:hover .solution-icon,
.industry-card:hover .industry-icon,
.process-card:hover i,
.benefit-card:hover i{

    transform:
    translateY(-6px)
    rotate(-8deg)
    scale(1.1);

}


/*==========================================================
CARD BORDER ANIMATION
==========================================================*/

.product-card,
.feature-box,
.network-card,
.industry-card,
.solution-card,
.document-card,
.eligibility-card,
.process-card,
.benefit-card,
.testimonial-card{

    overflow:hidden;

}

.product-card::before,
.feature-box::before,
.network-card::before,
.industry-card::before,
.solution-card::before,
.document-card::before,
.eligibility-card::before,
.process-card::before,
.benefit-card::before,
.testimonial-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:
    linear-gradient(135deg,
    rgba(227,6,19,.18),
    transparent);

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.product-card:hover::before,
.feature-box:hover::before,
.network-card:hover::before,
.industry-card:hover::before,
.solution-card:hover::before,
.document-card:hover::before,
.eligibility-card:hover::before,
.process-card:hover::before,
.benefit-card:hover::before,
.testimonial-card:hover::before{

    opacity:1;

}


/*==========================================================
FORM ENHANCEMENT
==========================================================*/

.lead-form-card{

    position:sticky;

    top:110px;

}

.lead-form-card input,
.lead-form-card select{

    transition:.3s;

}

.lead-form-card input:hover,
.lead-form-card select:hover{

    border-color:#FCA5A5;

}


/*==========================================================
BUTTON GLOW
==========================================================*/

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(90deg,

    transparent,

    rgba(255,255,255,.4),

    transparent);

    transition:.8s;

}

.btn-primary:hover::after{

    left:160%;

}


/*==========================================================
HOVER LIFT
==========================================================*/

.card,
.product-card,
.feature-box,
.network-card,
.industry-card,
.solution-card,
.document-card,
.eligibility-card,
.process-card,
.benefit-card,
.testimonial-card{

    will-change:transform;

}


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

.accordion-item{

    transition:.3s;

}

.accordion-item:hover{

    transform:translateY(-3px);

}


/*==========================================================
TESTIMONIAL
==========================================================*/

.testimonial-card{

    position:relative;

}

.testimonial-card::after{

    content:"★★★★★";

    position:absolute;

    right:25px;

    top:20px;

    color:#FFE08A;

    font-size:13px;

    letter-spacing:2px;

}


/*==========================================================
SCROLL INDICATOR
==========================================================*/

html{

    scroll-padding-top:100px;

}


/*==========================================================
FOCUS
==========================================================*/

*:focus-visible{

    outline:3px solid rgba(227,6,19,.2);

    outline-offset:3px;

}


/*==========================================================
SELECTION
==========================================================*/

::selection{

    background:#E30613;

    color:#fff;

}


/*==========================================================
LOADING
==========================================================*/

.loading{

    opacity:.65;

    pointer-events:none;

}


/*==========================================================
DESKTOP
==========================================================*/

@media(min-width:1200px){

.hero-section{

    min-height:100vh;

    display:flex;

    align-items:center;

}

}


/*==========================================================
TABLET
==========================================================*/

@media(max-width:992px){

.lead-form-card{

    position:relative;

    top:0;

}

}


/*==========================================================
MOBILE
==========================================================*/

@media(max-width:768px){

.hero-section{

    min-height:auto;

}

.hero-buttons{

    gap:12px;

}

.btn{

    width:100%;

}

.lead-form-card{

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

}


/*==========================================================
STICKY MOBILE CTA
==========================================================*/

.mobile-sticky-cta{

    display:none;

}

@media(max-width:768px){

.mobile-sticky-cta{

    display:flex;

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    background:#fff;

    z-index:9999;

    box-shadow:0 -5px 25px rgba(0,0,0,.08);

}

.mobile-sticky-cta a{

    flex:1;

    padding:16px;

    text-align:center;

    font-weight:700;

    border-right:1px solid #eee;

}

.mobile-sticky-cta a:last-child{

    border-right:none;

}

}


/*==========================================================
BACK TO TOP
==========================================================*/

.back-top{

    position:fixed;

    right:25px;

    bottom:30px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#E30613;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 35px rgba(0,0,0,.2);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}