/* =========================================================
   COMPONENTS.CSS
   HAZLO FACIL TRAVEL
========================================================= */

/* =========================================================
   GLASS CARD
========================================================= */

.glass-card {

    background:
        var(--glass-bg);

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

    backdrop-filter:
        var(--blur);

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

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

}

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

.section-title {

    text-align: center;

    margin-bottom: 75px;

}

.section-title h2 {

    font-family:
        var(--font-primary);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4rem
        );

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

    margin-bottom: 20px;

    line-height: 1.1;

}

.section-title p {

    max-width: 850px;

    margin: auto;

    font-size: 1.2rem;

    line-height: 1.8;

    color:
        var(--text-light);

}

/* =========================================================
   BADGES
========================================================= */

.hero-badges {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 45px;

}

.badge-item {

    position: relative;

    overflow: hidden;

    padding:
        15px 26px;

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

    background:
        var(--glass-bg);

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

    backdrop-filter:
        var(--blur);

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

    transition:
        var(--transition-normal);

}

.badge-item::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent
        );

}

.badge-item:hover {

    transform:
        translateY(-5px);

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

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

}

/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {

    position: relative;

    overflow: hidden;

    height: 100%;

    padding: 42px;

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

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

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

    backdrop-filter:
        blur(18px);

    transition:
        var(--transition-normal);

}

.service-card::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.05),
            transparent
        );

    pointer-events: none;

}

.service-card:hover {

    transform:
        translateY(-10px);

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

}

.service-card h3 {

    font-family:
        var(--font-primary);

    font-size: 1.7rem;

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

    margin-bottom: 28px;

}

.service-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.service-card ul li {

    position: relative;

    padding-left: 32px;

    margin-bottom: 16px;

    line-height: 1.7;

    color:
        var(--text-light);

}

.service-card ul li::before {

    content: '✈';

    position: absolute;

    left: 0;

    top: 0;

    color:
        var(--accent);

    font-size: 1rem;

}

/* =========================================================
   ICON BOXES
========================================================= */

.icon-box {

    width: 95px;
    height: 95px;

    display: flex;

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

    border-radius: 24px;

    font-size: 2rem;

    margin-bottom: 30px;

    color: #fff;

    position: relative;

    overflow: hidden;

}

.icon-box::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            transparent
        );

}

.icon-box i {

    position: relative;

    z-index: 2;

}

.usa {

    background:
        var(--gradient-blue);

}

.canada {

    background:
        var(--gradient-red);

}

.travel {

    background:
        var(--gradient-purple);

}

/* =========================================================
   QUOTE BOX
========================================================= */

.quote-box {

    position: relative;

    overflow: hidden;

    padding: 75px;

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

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

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

    backdrop-filter:
        blur(18px);

}

.quote-box::before {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            transparent
        );

}

.quote-box h2 {

    position: relative;

    z-index: 2;

    font-family:
        var(--font-primary);

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

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

    line-height: 1.4;

    margin-bottom: 20px;

}

.quote-box p {

    position: relative;

    z-index: 2;

    font-size: 1.25rem;

    color:
        var(--text-light);

}

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

.stat-card {

    padding: 45px;

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

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

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

    transition:
        var(--transition-normal);

}

.stat-card:hover {

    transform:
        translateY(-8px);

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

}

.stat-card h2 {

    font-family:
        var(--font-primary);

    font-size: 4rem;

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

    margin-bottom: 12px;

}

.stat-card p {

    color:
        var(--text-light);

    letter-spacing: 1px;

}

/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-icons {

    margin-top: 25px;

}

.social-icons a {

    width: 56px;
    height: 56px;

    display: inline-flex;

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

    margin: 0 8px;

    border-radius: 50%;

    text-decoration: none;

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

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

    color: #fff;

    transition:
        var(--transition-normal);

}

.social-icons a:hover {

    transform:
        translateY(-6px);

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

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

}

/* =========================================================
   ALERTS
========================================================= */

.alert {

    border: none;

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

    padding: 20px;

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

}

.alert-success {

    background:
        rgba(25,135,84,.18);

    color:
        #9CFFCF;

}

.alert-danger {

    background:
        rgba(220,53,69,.18);

    color:
        #FFB4BC;

}

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

.section-divider {

    width: 120px;
    height: 4px;

    margin:
        25px auto;

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

    background:
        var(--gradient-primary);

}

/* =========================================================
   GLOW TEXT
========================================================= */

.glow-text {

    color:
        var(--accent);

    text-shadow:
        0 0 25px rgba(90,168,255,.85);

}

/* =========================================================
   BLUR BACKGROUND
========================================================= */

.blur-bg {

    backdrop-filter:
        blur(18px);

}

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

.hover-lift {

    transition:
        var(--transition-normal);

}

.hover-lift:hover {

    transform:
        translateY(-8px);

}