/* CSS Variables - Design System */
:root {
--primary: 199, 99%, 38%; 
--primary-light: 199, 90%, 60%; 
  
  --background: 0, 0%, 100%;
  --foreground: 222, 84%, 5%;
  --muted-foreground: 215, 16%, 57%;
  --border: 220, 13%, 91%;
  --card: 0, 0%, 100%;
  --secondary: 220, 14%, 96%;
  
  --gradient-primary: linear-gradient(
    135deg,
    hsl(var(--primary)),
    hsl(var(--primary-light))
  );
  --gradient-subtle: linear-gradient(
    135deg,
    hsl(var(--primary), 0.05),
    hsl(var(--primary-light), 0.05)
  );
  
  --shadow-card: 0 4px 20px -2px hsl(220, 13%, 20%, 0.08);
  --shadow-button: 0 4px 14px 0 hsl(var(--primary), 0.25);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Reset and Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    line-height: 1.6;
}
.txtblue{color: #0183c0} .txtred{color: #E30134}
/*FONT SIZE*/
.f_12{font-size: 12px}.f_14{font-size: 14px}.f_15{font-size: 15px}.f_16{font-size: 16px}.f_18{font-size: 18px}.f_20{font-size: 20px}.f_22{font-size: 22px}.f_24{font-size: 24px}.f_30{font-size: 30px}.f_28{font-size: 28px}.f_35{font-size: 35px}.f_40{font-size: 40px}

/*COLOR*/
.bgwhite{background-color: #ffffff}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Utility Classes */
.gradient-primary { background: var(--gradient-primary); }
.gradient-subtle { background: var(--gradient-subtle); }
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-button { box-shadow: var(--shadow-button); }
.transition-smooth { transition: var(--transition-smooth); }
.transition-bounce { transition: var(--transition-bounce); }

/* Header Styles */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background:#0183c0;
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    height: 4rem;
    align-items: center;
    justify-content: space-between;
}

.logo { display: flex; align-items: center; gap: 0.5rem; }

.logo-icon {
    width: 2.5rem; height: 2.5rem;
    background: var(--gradient-primary);
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: bold; font-size: 1.125rem;
}

.logo-text {
    font-size: 1.5rem; font-weight: bold;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Desktop navigation */
.nav-desktop { display: none; gap: 2rem; }
.nav-desktop a {
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-smooth);
}
.nav-desktop a:hover { color: #ef8e23; }

/* Mobile menu button */
.menu-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
}

#menu-icon {
    font-size: 1.5rem;
    color: #fff;
}

/* Mobile navigation */
.nav-mobile {
    display: none;
    padding: 1rem 0;
}
.nav-mobile.active { display: block; }
.nav-mobile a {
    display: block;
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    padding: 1rem 0;
    transition: var(--transition-smooth);
}
.nav-mobile a:hover {
    color: #ef8e23;
    background: rgba(0, 0, 0, 0.03);
}

@media (min-width: 1024px) {
    .nav-desktop { display: flex; }
    .menu-btn { display: none; }
}

/* Button Styles */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; font-weight: 500; text-decoration: none; border-radius: 12px;
    transition: var(--transition-bounce); cursor: pointer; border: none; font-size: 1rem;
}
.btn-primary { background: var(--gradient-primary); color: white; box-shadow: var(--shadow-button); }
.btn-primary:hover { transform: scale(1.05); }
.btn-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.btn-outline:hover { background: var(--gradient-subtle); }
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }

/* Section Styles */
.section { padding: 5rem 0; }
.section-title { text-align: center; margin-bottom: 4rem; }
.section-title h2 { font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem; color: #ef8e23 }
.section-title p { font-size: 1.25rem; color: #333; max-width: 50rem; margin: 0 auto; }

/* Hero Section */
.hero { 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    position: relative; 
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/bg-home.png') no-repeat center center;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

.hero-grid { 
    display: grid; 
    gap: 3rem; 
    align-items: center; 
    position: relative; 
    z-index: 1; 
}

.hero-content { text-align: center; }
.hero-title { font-size: 2.5rem; font-weight: bold; line-height: 1.2; margin-bottom: 1rem; color: #ef8e23 }
.hero-subtitle { font-size: 1.125rem; color:#333; margin-bottom: 1rem; }
.hero-description { font-size: 0.95rem; color: #666; margin-bottom: 2rem; }
.hero-buttons { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.hero-features { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.hero-feature { display: flex; align-items: center; gap: 0.5rem; }

.hero-visual {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);

    padding: 0;
    color: inherit;
    text-align: left;

    min-height: 360px;

    background: hsl(var(--secondary));
}

.hero-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    min-height: 360px;
}
.hero-visual-icon {
    width: 4rem; height: 4rem; 
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; font-size: 2rem;
}
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.hero-stat { background: rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 1rem; text-align: center; }
.hero-stat-number { font-size: 1.5rem; font-weight: bold; }
.hero-stat-label { font-size: 0.875rem; opacity: 0.9; }

@media (min-width: 768px) {
    .hero-buttons { flex-direction: row; justify-content: center; }
    .hero-content { text-align: left; }
    .hero-features { justify-content: flex-start; }
}

@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 50% 50% !important; }
    .hero-title { font-size: 4rem; }
}

@media (max-width: 768px) {
    .hero-visual { 
        min-height: 180px !important;
    }
    .hero-visual img {
        min-height: 180px !important;
        height: 180px !important;
        object-fit: cover;
    }
}

.card {
    background: hsl(var(--card)); padding: 2rem; border-radius: 12px; transition: var(--transition-smooth);
    border: 1px solid hsl(var(--border));
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-0.5rem); }
.card-icon {
    width: 4rem; height: 4rem; background-color: #0183c0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: var(--transition-bounce);
}
.card:hover .card-icon { transform: scale(1.1); }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; text-align: center; }
.card-description { color: #333; text-align: center; font-size: 0.8rem }

.card2 {
    background: hsl(var(--card)); border-top-right-radius: 1rem; border-top-left-radius: 1rem; transition: var(--transition-smooth);
    border: 1px solid hsl(var(--border));
}
.card2:hover { box-shadow: var(--shadow-card); transform: translateY(-0.5rem); }
.card2-icon {
    width: 4rem; height: 4rem; background: var(--gradient-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: var(--transition-bounce);
}
.card2:hover .card2-icon { transform: scale(1.1); }
.card2-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; text-align: center; }
.card2-description { color: #333; text-align: center; font-size: 0.8rem }

.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* About Section */
.about-grid { display: grid; gap: 4rem; align-items: center; }
.about-content h2 { font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem; }
.about-content p { font-size: 1.125rem; color: #333; margin-bottom: 1rem; }

.tech-card {
    background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px);
    border-radius: 1rem; padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start;
    transition: var(--transition-smooth); border: none;
}
.tech-card:hover { box-shadow: var(--shadow-card); }
.tech-card-icon {
    width: 3rem; height: 3rem; background: var(--gradient-primary); border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-bounce);
}
.tech-card:hover .tech-card-icon { transform: scale(1.1); }
.tech-card-content h4 { font-weight: 600; font-size: 1.125rem; margin-bottom: 0.5rem; }
.tech-card-content p { color: #333; font-size: 0.875rem; }

@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; } }

/* --- How It Works --- */
.steps-grid {
    display: grid;
    gap: 2.5rem;
    text-align: center;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .steps-grid { grid-template-columns: repeat(4, 1fr); }
}
.steps-grid .step::after { display: none !important; }
.steps-grid .step .card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.steps-grid .step .card-icon { display: none; }
.icon-wrapper {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.icon-wrapper i { font-size: 1.6rem; }
.icon-wrapper .step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: hsl(var(--primary));
    border: 2px solid hsl(var(--primary));
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.steps-grid .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.steps-grid .card-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
    max-width: 16rem;
    margin: 0 auto;
}

/* Contact Section */
.contact-method { text-align: center; }
.contact-method-icon {
    width: 4rem; height: 4rem; background: var(--gradient-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; transition: var(--transition-bounce);
}
.contact-method:hover .contact-method-icon { transform: scale(1.1); }
.contact-method h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; }
.contact-method .content { color: hsl(var(--primary)); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.8rem;}
.contact-method .description { color: #333; font-size: 0.875rem; }

.contact-form { max-width: 64rem; margin: 4rem auto 0; }
.contact-form-content { display: grid; gap: 2rem; padding: 2rem; background: var(--gradient-subtle); border-radius: 1rem; }
.contact-info h4 { font-weight: 600; margin-bottom: 0.5rem; }
.contact-info p { color: #333; margin-bottom: 1.5rem; }
.contact-buttons { display: flex; flex-direction: column; gap: 1rem; }

@media (min-width: 768px) {
    .contact-form-content { grid-template-columns: 1fr 1fr; }
    .contact-buttons { justify-content: center; }
}

@media (min-width: 768px) {
    .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
}

/* Stats Section */
.stats-section {
    background: var(--gradient-primary); border-radius: 1.5rem; padding: 2rem; color: white;
    text-align: center; margin-top: 4rem;
}
.stats-section h3 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; }
.stats-section p { font-size: 1.125rem; opacity: 0.9; margin-bottom: 1.5rem; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stat-item { background: rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 1rem; }
.stat-number { font-size: 2rem; font-weight: bold; }
.stat-label { font-size: 0.875rem; opacity: 0.9; }

@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Responsive text sizing */
@media (min-width: 768px) { .section-title h2 { font-size: 3rem; } }
@media (min-width: 1024px) { .section-title h2 { font-size: 3.5rem; } }

/* Icons (using Unicode symbols) */
.icon { display: inline-block; font-style: normal; color: white; font-size: 1.5rem; }
.icon-menu::before { content: "☰"; }
.icon-close::before { content: "✕"; }
.icon-arrow-right::before { content: "→"; }
.icon-shield::before { content: "🛡"; }
.icon-clock::before { content: "🕒"; }
.icon-credit-card::before { content: "💳"; }
.icon-zap::before { content: "⚡"; }
.icon-dollar::before { content: "💰"; }
.icon-headphones::before { content: "🎧"; }
.icon-building::before { content: "🏢"; }
.icon-smartphone::before { content: "📱"; }
.icon-chart::before { content: "📊"; }
.icon-phone::before { content: "📞"; }
.icon-mail::before { content: "✉"; }
.icon-message::before { content: "💬"; }
.icon-emergency::before { content: "🚨"; }
.icon-car::before { content: "🚗"; }
.icon-login::before { content: "🚪"; }
.icon-logout::before { content: "🚪"; }
.icon-shopping::before { content: "🛍"; }
.icon-home::before { content: "🏠"; }
.icon-heart::before { content: "❤"; }
.icon-map::before { content: "📍"; }

/* Override hero grid for 70/30 split on desktop */
@media (min-width: 1024px)
.card-icon i {
    font-size: 1.5rem;
    color: #fff;
}
.center-card {
    grid-column: 2 / span 1;
    justify-self: center;
}
/* --- How It Works (new style) --- */
.steps-grid {
    display: grid;
    gap: 2.5rem;
    text-align: center;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .steps-grid { grid-template-columns: repeat(4, 1fr); }
}

/* remove old connector line & card styling */
.steps-grid .step::after { display: none !important; }
.steps-grid .step .card { background: transparent; border: none; box-shadow: none; padding: 0; }
.steps-grid .step .card-icon { display: none; }

/* --- Big standout red circles --- */
.steps-grid .icon-wrapper {
    position: relative;
    width: 112px;  
    height: 112px;
    border-radius: 20px;
    background: #22aef0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;

    /* white ring + soft red glow for emphasis */
    box-shadow:
        0 10px 30px hsl(var(--primary), 0.35),
        0 0 0 6px #fff;

    transition: var(--transition-bounce);
    margin: 0 auto 1rem; 
}

.steps-grid .icon-wrapper i {
    font-size: 2.2rem; 
    line-height: 1;
}

/* number bubble */
.steps-grid .icon-wrapper .step-number {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #ef8e23;
    border: 3px solid #ef8e23;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* subtle hover lift (optional but nice) */
.steps-grid .icon-wrapper:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 14px 36px hsl(var(--primary), 0.4),
        0 0 0 6px #fff;
}

/* responsive: slightly reduce on small phones so it fits nicely */
@media (max-width: 420px) {
    .steps-grid .icon-wrapper {
        width: 96px;
        height: 96px;
    }
    .steps-grid .icon-wrapper i {
        font-size: 1.9rem;
    }
    .steps-grid .icon-wrapper .step-number {
        width: 30px;
        height: 30px;
        top: -8px;
        right: -8px;
        font-size: 0.95rem;
        border-width: 2px;
    }
}

/* icon circle wrapper */
.icon-wrapper {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    font-size: 1.6rem;
}

/* small number bubble */
.icon-wrapper .step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: hsl(var(--primary));
    border: 2px solid hsl(var(--primary));
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    margin: 0;
}

/* text below icon */
.steps-grid .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.steps-grid .card-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
    max-width: 16rem;
    margin: 0 auto;
}
/*PRIVACY*/
.privacypadding {
    padding: 60px 120px;
}
.privacytext {
    font-size: 60px;
    text-shadow: 2px 2px 6px black;
}
@media (max-width: 576px) {
    .privacypadding {
        padding: 10px 30px;
    }
    .privacytext {
        font-size: 40px;
        text-shadow: 2px 2px 6px black;
    }
}