/* ==========================================================
   Elite5Pro Verify Business
   Page Specific Styles
   ========================================================== */

/* ---------- Hero ---------- */

.verify-hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #3056d3 0%,
        #4f6ef7 45%,
        #18c2c9 100%
    );

    color:#fff;

    padding:24px 40px;

    border-radius:18px;

    margin:25px auto 10px;

    text-align:center;
}
.verify-hero::before,
.verify-hero::after{

    content:"";

    position:absolute;

    border-radius:50%;

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

    z-index:1;
}

.verify-hero::before{

    width:220px;

    height:220px;

    top:-90px;

    right:-80px;
}

.verify-hero::after{

    width:160px;

    height:160px;

    bottom:-60px;

    left:-60px;
}
.section-intro{

    text-align:center;

    max-width:720px;

    margin:0 auto 35px;

    color:#666;
}
.verify-hero > *{
    position:relative;
    z-index:2;
}
.verify-hero h1{

    margin:0;

    font-size:46px;

    font-weight:700;

    line-height:1.15;

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

    margin:12px 0 20px;

    font-size:22px;

    font-weight:600;

    text-align:center;

    opacity:.95;
}

.hero-description{

    

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    text-align:center;
}

.hero-content{

    max-width:1020px;

    margin:0 auto;
}
/* ---------- Sections ---------- */



.content-block{

    margin:10px 0;
}

.section-title{

    text-align:center;

    color:#21408d;

   font-size:32px;

    

    font-weight:700;

   margin-bottom: 0px
}


/* ---------- Introduction ---------- */

.highlight-box{

    background:#fff;

    border-radius:16px;

    padding:15px 36px;

    border:1px solid #e8edf6;

    box-shadow:
    0 10px 28px rgba(40,70,140,.08);
}

.highlight-box h2{

    color:#21408d;

    margin-top:0;
}

.highlight-box p{

    line-height:1.9;
}


/* ---------- Important ---------- */

.important-box{

   margin-top: 10px;

    padding:22px 24px;

    border-left:5px solid #ffc107;

    border-radius:12px;

    background:#fff9e8;

    line-height:1.8;
}
.card-heading{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    text-align:center;
}

.card-heading h2{

    margin:0;

    color:#21408d;

    font-size:28px;

    font-weight:700;

    line-height:1.25;

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

    text-align:center;
}

/* ---------- Grid ---------- */

.feature-grid,
.benefit-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:24px;

    margin-top:15px;
}


/* ---------- Cards ---------- */

.feature-card,
.benefit-card,
.content-card,
.faq-card{

    background:#fff;

    border:1px solid #e9edf6;

    border-radius:16px;

    padding:20px;

    box-shadow:
    0 10px 28px rgba(35,64,142,.08);

    transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.feature-card:hover,
.benefit-card:hover,
.content-card:hover,
.faq-card:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 18px 40px rgba(35,64,142,.12);
}

.feature-card h3{

    color:#21408d;

    margin-top:0;

     font-size:20px;

    line-height:1.35;

    margin-bottom:10px;
}
.feature-card p{

    font-size:15px;

    line-height:1.6;

    margin:0;
}


/* ---------- Benefits ---------- */

.benefit-card{

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:80px;

    padding:18px;

    font-size:16px;

    line-height:1.5;

    font-weight:600;

  
}


/* ---------- Lists ---------- */

.feature-card ul,
.content-card ul{

    display:inline-block;

    text-align:left;

    margin:18px auto 0;

    padding-left:20px;
}

.feature-card li,
.content-card li{

    margin-bottom:10px;
}


/* ---------- Generic Paragraph ---------- */

.verify-section p{

    color:#555;

    line-height:1.75;

    font-weight:700;

    margin-bottom:0;
}

/* ==========================================================
   Verification Process
   ========================================================== */

.timeline{

    display:grid;

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

    gap:24px;

    margin-top:20px;

    align-items:stretch;
}

.timeline-item{
    

    background:#fff;

    border:1px solid #e9edf6;

    border-radius:16px;

    padding:24px;
    height:100%;

    box-shadow:
        0 10px 30px rgba(34,64,142,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}
.timeline-content{

    width:100%;

    text-align:center;
}
.timeline-item:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(34,64,142,.14);
}
.timeline-item:last-child{

    grid-column:1 / -1;
}
.timeline-content h3{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    color:#21408d;

    font-size:21px;

    margin:0 0 18px;

    text-align:center;
}

.step-icon{

    width:34px;

    height:34px;

    min-width:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #4f6ef7,
            #18c2c9
        );

    color:#fff;

    font-size:18px;

    font-weight:700;

    box-shadow:
        0 4px 12px rgba(79,110,247,.30);
}

.timeline-content p{

    margin-bottom:10px;

    font-size:15px;

    line-height:1.7;

    text-align:center;
}
.timeline-content ul{

    display:inline-block;

    text-align:left;

    margin:16px auto 0;

    padding-left:20px;
}

.timeline-content li{

    margin-bottom:10px;

    line-height:1.8;
}


/* ==========================================================
   Two Column Section
   ========================================================== */

.two-column{

    display:grid;

    

    gap:30px;

    margin-top:70px;
}

.content-card h2{

    color:#21408d;

    margin:0;
}

.content-card ul{

    padding-left:22px;
}

.content-card li{

    margin-bottom:12px;

    line-height:1.8;
}


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

.faq-section{

    margin:40px 0 0;
}

.faq-section h2{

    text-align:center;

    color:#21408d;

    margin-bottom:35px;
}

.faq-card{

    margin:0 0 16px;

    padding:22px;

    border-left:4px solid #4f6ef7;
}
.faq-card:last-child{

    margin-bottom:0;
}

.faq-card h3{

    margin-top:0;

    color:#21408d;

    font-size:20px;

    margin-bottom:10px;
}

.faq-card p{

    margin-bottom:14px;
}


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

.verify-cta{

    margin-top:80px;

    padding:70px 40px;

    border-radius:18px;

    text-align:center;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #3056d3,
            #4f6ef7,
            #18c2c9
        );
}

.verify-cta h2{

    margin-top:0;

    font-size:38px;
}

.verify-cta p{

    max-width:760px;

    margin:20px auto 35px;

    color:#fff;

    opacity:.95;

    line-height:1.9;
}

.verify-cta .primary-btn{

    display:inline-block;

    padding:15px 34px;

    border-radius:999px;

    background:#fff;

    color:#21408d;

    text-decoration:none;

    font-weight:700;

    transition:.25s ease;
}

.verify-cta .primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.18);
}

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

@media (max-width:1200px){

    .verify-hero{
        padding:22px 10px;
    }

    .hero-content{
        max-width:900px;
    }

    .verify-hero h1{
        font-size:40px;
    }

    .hero-tagline{
        font-size:21px;
    }

    .hero-description{
        font-size:17px;
        line-height:1.8;
    }

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

}


@media (max-width:992px){

    .verify-hero{
        padding:22px 10px;
    }

    .hero-content{
        max-width:720px;
    }

    .verify-hero h1{
        font-size:36px;
    }

    .hero-tagline{
        font-size:20px;
        margin:8px 0 16px;
    }

    .hero-description{
        font-size:16px;
        line-height:1.75;
    }

    .two-column{
        grid-template-columns:1fr;
        gap:24px;
    }

    .feature-grid,
    .benefit-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .timeline{

    grid-template-columns:1fr;
}

.timeline-item:last-child{

    grid-column:auto;
}
    .timeline-item{
        padding:26px;
    }

}


@media (max-width:768px){

    .verify-hero{

        padding:24px 10px;

        margin:16px 0 28px;

        border-radius:16px;
    }

    .hero-content{

        max-width:100%;
    }

    .verify-hero h1{

        font-size:30px;

        line-height:1.2;
    }

    .hero-tagline{

        font-size:18px;

        margin:6px 0 12px;
    }

    .hero-description{

        font-size:15px;

        line-height:1.7;
    }

    .section-title{

        font-size:28px;

        margin-bottom:24px;
    }
    .card-heading{

    gap:10px;

    margin-bottom:16px;
}

.card-heading h2{

    font-size:24px;
}
    .highlight-box,
    .feature-card,
    .benefit-card,
    .content-card,
    .faq-card,
    .timeline-item{

        padding:20px;
    }

    .feature-grid,
    .benefit-grid{

        grid-template-columns:1fr;
    }

    .timeline-content h3{

        font-size:20px;

        gap:10px;
    }

    .step-icon{

        width:28px;
        height:28px;
        min-width:28px;
        font-size:15px;
    }

}


@media (max-width:576px){

    .verify-container{

        padding:0 10px;
    }

    .verify-hero{

        padding:20px 10px;

        border-radius:14px;
    }

    .verify-hero h1{

        font-size:24px;
    }

    .hero-tagline{

        font-size:16px;
    }

    .hero-description{

        font-size:14px;

        line-height:1.65;
    }

    .section-title{

        font-size:22px;
    }

    .feature-card,
    .benefit-card,
    .content-card,
    .faq-card,
    .timeline-item{

        padding:18px;
    }

    .timeline-content h3{

        font-size:18px;

        align-items:flex-start;
    }

    .step-icon{

        width:26px;
        height:26px;
        min-width:26px;

        font-size:14px;
    }

}
/* ==========================================================
   Small UI Improvements
   ========================================================== */

.feature-card,
.benefit-card,
.content-card,
.faq-card,
.timeline-item{

    height:100%;
}

.feature-card p:last-child,
.content-card p:last-child,
.faq-card p:last-child{

    margin-bottom:0;
}

.feature-card ul:last-child,
.content-card ul:last-child{

    margin-bottom:0;
}

.feature-card strong,
.timeline-content strong{

    color:#21408d;
}

.timeline-content ul li::marker,
.content-card ul li::marker{

    color:#18c2c9;
}

a.primary-btn{

    transition:
        all .25s ease;
}

a.primary-btn:hover{

    transform:translateY(-2px);
}

.verify-section{

    overflow:hidden;
}


/* ==========================================================
   Smooth Appearance
   ========================================================== */

.feature-card,
.benefit-card,
.timeline-item,
.content-card,
.faq-card{

    animation:fadeUp .45s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(12px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}


/* ==========================================================
   Print
   ========================================================== */

@media print{

    .verify-hero{

        background:#21408d !important;

        color:#fff !important;
    }

    .feature-card,
    .benefit-card,
    .content-card,
    .faq-card,
    .timeline-item{

        box-shadow:none;

        border:1px solid #ccc;
    }

}

/* ==========================================
   Apply for Verification
========================================== */

.verify-contact{
    margin:40px 0 50px;
}

.verify-contact-card{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;

    padding:30px 36px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #0f766e 0%,
        #0d9488 55%,
        #14b8a6 100%
    );

    color:#fff;

    position:relative;
    overflow:hidden;

    box-shadow:0 18px 40px rgba(13,148,136,.25);
}

.verify-contact-card::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-90px;
    top:-90px;

    border-radius:50%;

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

.verify-contact-text,
.verify-contact-action{

    position:relative;
    z-index:2;
}

.verify-contact-text{

    flex:1;
}

.verify-contact-text h2{

    margin:0 0 10px;

    color:#fff;

    font-size:30px;
}

.verify-contact-text p{

    margin:0;

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

    line-height:1.8;

    max-width:720px;
}

.verify-email-btn{

    display:inline-flex;

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

    padding:15px 28px;

    border-radius:999px;

    background:#fff;

    color:#0f766e;

    font-weight:700;

    font-size:17px;

    text-decoration:none;

    white-space:nowrap;

    transition:.25s;
}

.verify-email-btn:hover{

    transform:translateY(-2px);
}

/* ---------------- Tablet ---------------- */

@media (max-width:992px){

    .verify-contact-card{

        flex-direction:column;

        text-align:center;

        padding:28px;
    }

    .verify-contact-text{

        width:100%;
    }

    .verify-contact-text p{

        max-width:100%;
    }

}

/* ---------------- Mobile ---------------- */

@media (max-width:768px){

    .verify-contact{

        margin:30px 0 40px;
    }

    .verify-contact-card{

        padding:22px;

        gap:20px;

        border-radius:16px;
    }

    .verify-contact-card::before{

        width:170px;
        height:170px;

        right:-70px;
        top:-70px;
    }

    .verify-contact-text h2{

        font-size:24px;
    }

    .verify-contact-text p{

        font-size:15px;

        line-height:1.7;
    }

    .verify-email-btn{

        width:100%;

        font-size:16px;

        padding:14px 20px;
    }

}

/* ---------------- Small Phones ---------------- */

@media (max-width:480px){

    .verify-contact-card{

        padding:18px;
    }

    .verify-contact-text h2{

        font-size:22px;
    }

    .verify-contact-text p{

        font-size:14px;
    }

    .verify-email-btn{

        font-size:15px;

        white-space:normal;

        word-break:break-word;
    }

}