@extends("layout")
@section("content")

<!-- Thank You Start -->


<!-- Bootstrap 5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<!-- Google Font -->

<style>
  :root{
    --tashan-red: #E11313;
    --tashan-red-dark: #A80D0D;
    --tashan-red-darker: #7A0909;
    --tashan-red-light: #FDEAEA;
    --tashan-red-tint: #FBD8D8;
    --tashan-ink: #1A1A1A;
    --tashan-gray: #6C757D;
    --gold: #F0A93D;
  }

  *{ box-sizing: border-box; }

  body{
    font-family: 'Poppins', sans-serif;
    background:
      radial-gradient(circle at 15% 0%, rgba(225,19,19,.06), transparent 45%),
      radial-gradient(circle at 100% 10%, rgba(225,19,19,.05), transparent 40%),
      #F6F5F8;
    color: var(--tashan-ink);
  }

  /* ---------- HERO ---------- */
  .hero-band{
    position: relative;
    background: linear-gradient(to top, #046a38 20%, #08048d 100%);
    padding: 3.25rem 0 4.75rem;
    overflow: hidden;
    isolation: isolate;
  }

  .hero-band::before,
  .hero-band::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter: blur(2px);
    opacity:.18;
    background: #fff;
    z-index:-1;
  }
  .hero-band::before{ width:260px; height:260px; top:-90px; left:-70px; }
  .hero-band::after{ width:180px; height:180px; bottom:-60px; right:6%; }

  .hero-band svg.grid-pattern{
    position:absolute; inset:0; width:100%; height:100%; opacity:.08; z-index:-1;
  }

  .logo-mark{
    height: 30px;
    filter: brightness(0) invert(1);
  }

  .check-badge{
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 8px rgba(255,255,255,.12);
    animation: pop .5s cubic-bezier(.34,1.56,.64,1) both;
  }
  .check-badge i{ color: #007b3f; font-size: 2.1rem; }

  @keyframes pop{
    0%{ transform: scale(0); opacity:0; }
    100%{ transform: scale(1); opacity:1; }
  }

  .page-heading{
    font-weight: 800;
    letter-spacing: .3px;
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
  }

  .lead-sub{
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
  }

  .email-pill{
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: 50rem;
    font-weight: 600;
    font-size: .92rem;
  }

  /* ---------- CARDS ---------- */
  .cards-row{
    margin-top: -3.25rem;
  }

  .info-card{
    border: none;
    border-radius: 18px;
    background: #fff;
    height: 100%;
    box-shadow: 0 14px 34px rgba(20,10,10,.09);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
  }
  .info-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:4px;
    background: linear-gradient(90deg, var(--tashan-red), var(--gold));
  }
  .info-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(20,10,10,.14);
  }

  .card-eyebrow{
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .8px;
    color: #08048d;
    text-transform: uppercase;
  }

  .icon-circle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tashan-red-light), var(--tashan-red-tint));
    color: #08048d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(225,19,19,.15);
  }

  .phone-number{
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .2px;
  }

  .pulse-dot{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background: var(--tashan-red);
    box-shadow: 0 0 0 0 rgba(225,19,19,.5);
    animation: pulse 1.8s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(225,19,19,.45); }
    70%{ box-shadow: 0 0 0 9px rgba(225,19,19,0); }
    100%{ box-shadow: 0 0 0 0 rgba(225,19,19,0); }
  }

  .callback-box{
    background: linear-gradient(135deg, #FFF7E4, #FFEEC4);
    border: 1px solid #FBE4A0;
    border-radius: 12px;
  }

  .offer-box{
    background: linear-gradient(to top, #046a38 20%, #08048d 100%);
    border-radius: 12px;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .offer-box::after{
    content:"";
    position:absolute; top:-30px; right:-30px; width:90px; height:90px; border-radius:50%;
    background: rgba(255,255,255,.12);
  }
  .offer-box .badge-hot{
    background:#fff; color: var(--tashan-red-dark); font-weight:700; font-size:.68rem;
    letter-spacing:.5px; border-radius:50rem; padding:.2rem .6rem;
  }

  /* ---------- STEPS / CTA PANEL ---------- */
  .right-col-panel{
    border: none;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(20,10,10,.07);
  }

  .step-number{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(to top, #046a38 20%, #08048d 100%);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(225,19,19,.3);
  }

  .step-item{
    position: relative;
    padding-bottom: 1.75rem;
  }
  .step-item:not(:last-child)::before{
    content:"";
    position: absolute;
    left: 19px;
    top: 38px;
    bottom: -4px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--tashan-red-tint) 0 6px, transparent 6px 12px);
  }

  .step-title{
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 1rem;
  }

  .step-desc{
    color: var(--tashan-gray);
    font-size: .9rem;
  }

  .btn-call-now{
    background: linear-gradient(to right, #046a38 20%, #08048d 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: .85rem 1rem;
    box-shadow: 0 10px 22px rgba(225,19,19,.32);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-call-now:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(225,19,19,.4);
    color:#fff;
  }

  .btn-whatsapp{
    background: linear-gradient(135deg, #29D96A, #1DA851);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: .85rem 1rem;
    box-shadow: 0 10px 22px rgba(37,211,102,.3);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn-whatsapp:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(37,211,102,.38);
    color:#fff;
  }

  .fallback-note{
    font-size: 15px;
    color: var(--tashan-gray);
    background: #FAFAFA;
    border-radius: 10px;
    padding: .65rem .9rem;
  }

  .fallback-note .fw-num{
    color: var(--tashan-red);
    font-weight: 700;
  }

  .badge-card{
    border: 1px solid #F1E7E7;
    border-radius: 12px;
    background: #fff;
    padding: .8rem .9rem;
    font-size: .86rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .65rem;
    height: 100%;
    transition: border-color .2s ease, background .2s ease;
  }
  .badge-card:hover{
    border-color: var(--tashan-red-tint);
    background: var(--tashan-red-light);
  }

  .badge-icon{
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: var(--tashan-red-light);
    color: #007b3f;
    display:flex; align-items:center; justify-content:center;
    font-size: .95rem;
  }

  .section-label{
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #08048d;
    margin-bottom: .9rem;
  }

  .divider-soft{
    height:1px;
    background: linear-gradient(90deg, transparent, #EDEDED, transparent);
    margin: 1.75rem 0;
  }

  footer.page-footer{
    color: var(--tashan-gray);
    font-size: .82rem;
  }

  @media (max-width: 767.98px){
    .cards-row{ margin-top: -2.25rem; }
    .hero-band{ padding-bottom: 3.5rem; }
  }

  .phone-number a {
    color: #007b3f; /* or your theme color */
    text-decoration: none;
    font-weight: 700;
}

.phone-number a:hover,
.phone-number a:focus,
.phone-number a:active {
    color: var(--tashan-red-dark);
    text-decoration: none;
}
</style>
<!-- ---------- HERO ---------- -->
<div class="hero-band text-center">
  <svg class="grid-pattern" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="grid" width="34" height="34" patternUnits="userSpaceOnUse">
        <path d="M 34 0 L 0 0 0 34" fill="none" stroke="#fff" stroke-width="1"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)"/>
  </svg>

  <div class="container position-relative">
   

    <div class="check-badge">
      <i class="bi bi-check-lg"></i>
    </div>

    <h1 class="page-heading mb-2">Thank You For Referring Us</h1>
    <p class="lead-sub mb-3">You’ll receive an additional 6 months free upon their subscription.</p>
    <span class="email-pill d-inline-flex align-items-center gap-2 px-3 py-2">
      <i class="bi bi-envelope-fill"></i>
      A copy of this information has been sent to your email
    </span>
  </div>
</div>
<div class="container pb-5">

  <!-- ---------- Three info cards ---------- -->
  <div class="row g-3 cards-row position-relative">
    <div class="col-12 col-md-4">
      <div class="info-card p-4">
        <div class="card-eyebrow mb-3">Expect a call from this number</div>
        <div class="d-flex align-items-center gap-3 mb-3">
          <div class="icon-circle"><i class="bi bi-telephone-fill"></i></div>
          <div>
            <div class="phone-number"><a href="tel:+14318045074">+1-431-804-5074</a></div>
            <div class="text-muted small"><b>Indian IPTV &ndash; Dedicated Support Line</b></div>
          </div>
        </div>
        <div class="small d-flex align-items-center gap-2" style="color: var(--tashan-red-dark); font-weight:500;">
          <span class="pulse-dot"></span>
          Save this number now so you don&rsquo;t miss our call
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="info-card p-4">
        <div class="card-eyebrow mb-3">Callback timeline</div>
        <div class="callback-box p-3 d-flex align-items-center gap-3 h-auto">
          <i class="bi bi-clock-history fs-3" style="color:#C98A0A;"></i>
          <div class="small">
            Our advisor will call you within the next <strong>30 minutes</strong>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="info-card p-4">
        <div class="card-eyebrow mb-3">Today&rsquo;s exclusive offer</div>
        <div class="offer-box p-3 d-flex gap-3">
          <i class="bi bi-gift-fill fs-4"></i>
          <div class="small">
            <span class="badge-hot mb-1 d-inline-block">LIMITED TIME</span><br>
            <strong>Win up to 6 months of free IPTV service.</strong><br>
            Speak with our advisor to claim this offer &ndash; available only on this callback.
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ---------- Steps + CTA ---------- -->
  <div class="row g-3 mt-3">
    <div class="col-12 col-lg-6">
      <div class="right-col-panel p-4 h-100">
        <div class="section-label">What happens next</div>

        <div class="step-item d-flex gap-3">
          <div class="step-number">1</div>
          <div>
            <div class="step-title">We review your request</div>
            <div class="step-desc">Our team checks your details and prepares the best plan options for you.</div>
          </div>
        </div>
        <div class="step-item d-flex gap-3">
          <div class="step-number">2</div>
          <div>
            <div class="step-title">Our advisor calls you</div>
            <div class="step-desc">Expect a call from our dedicated number within 1 hour during callback hours.</div>
          </div>
        </div>
        <div class="step-item d-flex gap-3 pb-0">
          <div class="step-number">3</div>
          <div>
            <div class="step-title">We help you choose &amp; activate</div>
            <div class="step-desc">Pick the right plan, confirm your order, and we handle the rest &ndash; fast activation guaranteed.</div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-6">
      <div class="right-col-panel p-4 h-100 d-flex flex-column">
        <div class="section-label">Talk to us now</div>

        <div class="row g-2 mb-3">
          <div class="col-6">
            <a href="tel:+14318045074" class="btn btn-call-now w-100 d-flex align-items-center justify-content-center gap-2">
              <i class="bi bi-telephone-fill"></i> Call Now
            </a>
          </div>
          <div class="col-6">
            <a href="https://wa.me/14318045074" class="btn btn-whatsapp w-100 d-flex align-items-center justify-content-center gap-2">
              <i class="bi bi-whatsapp"></i> WhatsApp
            </a>
          </div>
        </div>
        <p class="fallback-note text-center mb-0">
          Missed our call? Just call or WhatsApp us back on<br>
          <span class="fw-num phone-number"><a href="tel:+14318045074">+1-431-804-5074</a></span> we&rsquo;ll pick up right away.
        </p>

        <div class="divider-soft mt-0 mb-0"></div>

        <div class="row g-2 mt-auto">
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-lightning-charge-fill"></i></span> Fast Activation in 24 Hours</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-headset"></i></span> Live Support 6 AM&ndash;11 PM</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-shield-check"></i></span> 100% Secure Payment</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-gear-fill"></i></span> Easy Setup, We Guide You</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-file-earmark-text"></i></span> No Contract, Cancel Anytime</div>
          </div>
          <div class="col-6">
            <div class="badge-card"><span class="badge-icon"><i class="bi bi-display"></i></span> Works On All Devices</div>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- <section class="content-area py-5">
    <div class="container">                
        <div class="row">
            <div class="col-sm-12">
                <div class="thankyou-wrapper text-center">
                    <div class=" text-orange display-1"><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor" class="bi bi-envelope-check" viewBox="0 0 16 16">
  <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"/>
  <path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0m-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686"/>
</svg></div>
                    <h1 class="display-5 fw-900">Thank You</h1>
                    <h4>For referring us</h4>
                    <p>You’ll receive an additional 6 months free upon their subscription.</p>
                    <p>Having trouble? <a href="{{url('/iptv-customer-service')}}" class="text-orange fw-bolder">Contact us</a></p>
                    <p class="lead mt-4"><a class="mb-3 fs-m fs-6 p-2 rounded-5 text-center bg-white text-orange border-orange_1 fw-500 px-3" href="{{url('/usa')}}" role="button">Continue to Homepage</a></p>
                </div>
            </div>
        </div>    
    </div>
</section> -->

<!-- Thank You End -->


@endsection
@section("meta")

<title>Best Indian IPTV Service Provider in Canada & USA - Indian IPTV</title>
<meta name="description" content="Indian IPTV offers over 600+ hindi & regional channels through its IPTV service. With maximum number of HD channels and over1 lakh subscribers in USA & Canada, Indian IPTV is preferred IPTV service provider in USA & Canada. Call Now 1-431-804-5074" />
<meta name="author" content="https://www.indianiptv.net"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
<meta name="robots" content="noindex, nofollow">
<link rel="canonical" href="https://www.indianiptv.net/thankyou"/>
<meta name="twitter:card" content="" /> 
<meta name="twitter:description" content="indianIPTV is a pioneer IPTV service provider, offering the best online IPTV services in USA & Canada." />   
<meta property="og:locale" content="en_US"/>
    
<meta property="og:type" content="website" />    
<meta property="og:image:type" content="image/jpeg" /> 		
<meta property="og:title" content="Indian IPTV: Best Indian IPTV Service Provider in USA" />      
<meta property="og:description" content="Indian IPTV offers top Indian IPTV channels on your IPTV box. Leading Indian IPTV provider in USA for seamless service. Enjoy premium Indian entertainment today!" />    
<meta property="og:url" content="https://www.indianiptv.net" />      
<meta property="og:image" content="https://www.indianiptv.net/indianiptv.jpg" />
<meta property="og:image:secure_url" content="https://www.indianiptv.net/indianiptv.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="200" />
<meta property="og:image:alt" content="indianIPTV is a pioneer IPTV service provider" />

@endsection