/* GENEL STİLLER */
/* -------------------------------------------------- */

/* Fade-in animasyonu için temel stil */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    /* Fade-in animasyonu aktif olduğunda uygulanan stil */
    .fade-in-section.show {
        opacity: 1;
        transform: translateY(0);
    }

/* Animasyon gecikmeleri */
.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

.delay-3 {
    transition-delay: 0.6s;
}

/* KART (CARD) STİLLERİ */
/* -------------------------------------------------- */

/* Kartlar için temel stil ve hover efekti */
.card {
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

    /* Kart hover durumunda yukarı hareket ve gölge efekti */
    .card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 24px rgba(0, 49, 83, 0.1) !important;
    }

/* Kart gövdesi için stil */
.card-body {
    padding: 2rem;
    position: relative;
    z-index: 2;
    background: white;
}

/* Kart başlığı */
.card-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

/* Kart metin içeriği */
.card-text {
    color: #7f8c8d;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Kart kenar çizgisi efekti için temel stil */
.card-border-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color1), var(--color2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 3;
}

/* Kart hover durumunda kenar çizgisi efekti */
.card:hover .card-border-effect {
    transform: scaleX(1);
}

/* Kart kenar çizgisi efekti arka planı */
.card-border-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--color1), var(--color2));
    opacity: 0.1;
}

/* Kart kaldırma efekti (hover durumunda) */
.hover-lift {
    transition: all 0.3s ease;
}

    .hover-lift:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0, 49, 83, 0.175) !important;
    }

/* İKON STİLLERİ */
/* -------------------------------------------------- */

/* İkon konteyneri için stil (altıgen şekil) */
.icon-stack {
    position: relative;
    width: 80px;
    height: 80px;
    transition: all 0.3s ease;
    /* Altıgen görünüm */
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    /* İçeriği ortalamak için */
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Küçük boyutlu ikon konteyneri */
    .icon-stack.small {
        width: 70px;
        height: 70px;
        border-radius: 18px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

/* İkon içeriği */
.icon-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Normal ve hover ikonları için ortak stil */
.default-icon, .hover-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* Hover ikonu için başlangıç durumu */
.hover-icon {
    opacity: 0;
}

/* Kart hover durumunda ikon değişim efekti */
.hover-lift:hover .default-icon {
    opacity: 0;
}

.hover-lift:hover .hover-icon {
    opacity: 1;
}

/* Kart hover durumunda ikon renk değişimleri */
.card:hover .icon-stack[class*="bg-info"] {
    background-color: var(--bs-info) !important;
    color: white !important;
}

.card:hover .icon-stack[class*="bg-primary"] {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.card:hover .icon-stack[class*="bg-success"] {
    background-color: var(--bs-success) !important;
    color: white !important;
}

.card:hover .icon-stack[class*="bg-warning"] {
    background-color: var(--bs-warning) !important;
    color: white !important;
}

.card:hover .icon-stack[class*="bg-danger"] {
    background-color: var(--bs-danger) !important;
    color: white !important;
}

.card:hover .icon-stack[class*="bg-secondary"] {
    background-color: var(--bs-secondary) !important;
    color: white !important;
}

/* İkon sıçrama animasyonu */
.card:hover .icon-stack {
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* BUTON STİLLERİ */
/* -------------------------------------------------- */

/* Ok ikonlu buton hover efekti */
.btn-arrow-hover {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .btn-arrow-hover:hover {
        padding-right: 2.5rem;
    }

    .btn-arrow-hover i {
        transition: all 0.3s ease;
    }

    .btn-arrow-hover:hover i {
        transform: translateX(5px);
    }

/* 3D buton efekti */
.btn-3d {
    position: relative;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

    .btn-3d:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
    }

    .btn-3d:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    }

/* RESİM ÇERÇEVE STİLLERİ */
/* -------------------------------------------------- */

/* Resim çerçeve animasyonu için özellik tanımları */
@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --i {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

/* Resim çerçeve efekti */
img.cerceve {
    border: 5px solid #ccc;
    padding: 10px; /* çerçeve boşluğu */
    mask: conic-gradient(#000 0 0) content-box, linear-gradient(calc(mod(var(--a), 180deg) * var(--i) + 45deg), #0000 30%, #000 40% 60%, #0000 70%) subtract, conic-gradient(#000 0 0) padding-box;
    transition: --i 0.5s, --a 0s 0.5s;
}

    /* Resim hover durumunda çerçeve animasyonu */
    img.cerceve:hover {
        --i: 1;
        --a: 15turn;
        transition: --i 0s, --a 30s linear;
    }

/* BAŞLIK STİLLERİ */
/* -------------------------------------------------- */

/* Başlık alt çizgi efekti */
.position-relative.z-index-1 {
    position: relative;
    z-index: 1;
}

.position-absolute.z-index-0 {
    position: absolute;
    z-index: 0;
}

/* AKORDİYON (ACCORDION) STİLLERİ */
/* -------------------------------------------------- */

/* Akordiyon butonu stil - aktif durum */
.accordion-button:not(.collapsed) {
    background-color: rgba(0, 49, 83, 0.05);
    color: #003153;
}

/* Akordiyon butonu odaklandığında */
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 49, 83, 0.25);
}

/* Akordiyon butonu hover efekti */
.accordion-button:hover {
    background-color: rgba(0, 49, 83, 0.05);
}

/* FORM STİLLERİ */
/* -------------------------------------------------- */

/* Form etiketleri için stil */
.form-floating label {
    display: flex;
    align-items: center;
}

/* Form ikonları için geçiş efekti */
.form-floating i {
    transition: all 0.3s ease;
}

/* Form odaklandığında veya dolu olduğunda ikon büyütme */
.form-floating .form-control:focus ~ label i,
.form-floating .form-control:not(:placeholder-shown) ~ label i {
    transform: scale(1.2);
}

/* BAŞARI İSTATİSTİKLERİ */
/* -------------------------------------------------- */

/* İstatistik kartı hover durumunda progress bar animasyonu */
.stat-card:hover .progress-bar {
    width: 100% !important;
    transition: width 1.5s ease;
}

/* TİP YAZAR (TYPEWRITER) ANİMASYONU */
/* -------------------------------------------------- */

/* Tip yazıcı efekti için temel stil */
.typewriter {
    --caret: currentcolor;
}

    /* Tip yazıcı metin animasyonu */
    .typewriter::before {
        content: "";
        animation: typing 13.5s infinite;
    }

    /* Tip yazıcı imleç animasyonu */
    .typewriter::after {
        content: "";
        border-right: 1px solid var(--caret);
        animation: blink 0.5s linear infinite;
    }

    /* Kalın imleç */
    .typewriter.thick::after {
        border-right: 1ch solid var(--caret);
    }

    /* İmleç olmadan */
    .typewriter.nocaret::after {
        border-right: 0;
    }

/* Yazma animasyonu */
@keyframes typing {
    /* Detaylı animasyon adımları burada tanımlanmıştır */
    /* --- Rehber --- */
    0.0%, 1.5% {
        content: "";
    }

    1.6%, 2.7% {
        content: "R";
    }

    2.8%, 3.9% {
        content: "Re";
    }

    4.0%, 5.1% {
        content: "Reh";
    }

    5.2%, 6.3% {
        content: "Rehb";
    }

    6.4%, 7.5% {
        content: "Rehbe";
    }

    7.6%, 9.0% {
        content: "Rehber";
    }

    9.1%, 16.0% {
        content: "Rehber";
    }

    16.1%, 24.9% {
        content: "";
    }
    /* --- Öğretmen --- */
    25.0%, 26.1% {
        content: "Ö";
    }

    26.2%, 27.3% {
        content: "Öğ";
    }

    27.4%, 28.5% {
        content: "Öğr";
    }

    28.6%, 29.7% {
        content: "Öğre";
    }

    29.8%, 30.9% {
        content: "Öğret";
    }

    31.0%, 32.1% {
        content: "Öğretm";
    }

    32.2%, 33.3% {
        content: "Öğretme";
    }

    33.4%, 35.0% {
        content: "Öğretmen";
    }

    35.1%, 42.0% {
        content: "Öğretmen";
    }

    42.1%, 49.9% {
        content: "";
    }
    /* --- Arkadaş --- */
    50.0%, 51.1% {
        content: "A";
    }

    51.2%, 52.3% {
        content: "Ar";
    }

    52.4%, 53.5% {
        content: "Ark";
    }

    53.6%, 54.7% {
        content: "Arka";
    }

    54.8%, 55.9% {
        content: "Arkad";
    }

    56.0%, 57.1% {
        content: "Arkada";
    }

    57.2%, 58.5% {
        content: "Arkadaş";
    }

    58.6%, 65.0% {
        content: "Arkadaş";
    }

    65.1%, 74.9% {
        content: "";
    }
    /* --- Gelecek --- */
    75.0%, 76.1% {
        content: "G";
    }

    76.2%, 77.3% {
        content: "Ge";
    }

    77.4%, 78.5% {
        content: "Gel";
    }

    78.6%, 79.7% {
        content: "Gele";
    }

    79.8%, 80.9% {
        content: "Gelec";
    }

    81.0%, 82.1% {
        content: "Gelece";
    }

    82.2%, 83.5% {
        content: "Gelecek";
    }

    83.6%, 90.0% {
        content: "Gelecek";
    }

    90.1%, 100% {
        content: "";
    }
}

/* İmleç yanıp sönme animasyonu */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Duyarlı (responsive) tasarım için */
@media (prefers-reduced-motion) {
    .typewriter::after {
        animation: none;
    }

    @keyframes sequencePopup {
        0%, 100% {
            content: "Rehber";
        }

        25% {
            content: "Öğretmen";
        }

        50% {
            content: "Arkadaş";
        }

        75% {
            content: "Gelecek";
        }
    }

    .typewriter::before {
        content: "developer";
        animation: sequencePopup 12s linear infinite;
    }
}

/* ROL KARTLARI */
/* -------------------------------------------------- */

/* Rol kartları için temel stil */
.role-card {
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 8px;
}

/* Rol kartı ikon hover efekti */
.icon-hover {
    transition: all 0.3s ease;
}

.role-card:hover .icon-hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ANASAYFA HERO SECTION BUTTON */
/* -------------------------------------------------- */

/* Modern Buton Stilleri */
/* Modern Gradient Buton Stilleri */

/* PRIMARY (Mavi tonları) */
.btn-gradient-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #003153 100%);
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3);
}

/* SUCCESS (Yeşil tonları) */
.btn-gradient-success {
    background: linear-gradient(135deg, #198754 0%, #157347 100%);
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.3);
}

/* DANGER (Kırmızı tonları) */
.btn-gradient-danger {
    background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%);
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.3);
}

/* WARNING (Sarı/turuncu tonları) */
.btn-gradient-warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white; /* Koyu yazı rengi kontrast için */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3);
}

/* INFO (Açık mavi/turkuaz tonları) */
.btn-gradient-info {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(13, 202, 240, 0.3);
}

/* SECONDARY (Gri tonları) */
.btn-gradient-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);
}

/* DARK (Koyu gri/siyah tonları) */
.btn-gradient-dark {
    background: linear-gradient(135deg, #212529 0%, #000000 100%);
    color: white;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(33, 37, 41, 0.3);
}

/* LIGHT (Açık gri/beyaz tonları) */
.btn-gradient-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #212529; /* Koyu yazı rengi kontrast için */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    box-shadow: 0 6px 20px rgba(248, 249, 250, 0.3);
}

    /* Tüm butonlar için ortak hover efekti */
    .btn-gradient-primary:hover,
    .btn-gradient-success:hover,
    .btn-gradient-danger:hover,
    .btn-gradient-warning:hover,
    .btn-gradient-info:hover,
    .btn-gradient-secondary:hover,
    .btn-gradient-dark:hover,
    .btn-gradient-light:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        color: white;
    }

    /* Light buton için özel hover rengi */
    .btn-gradient-light:hover {
        color: #212529 !important; /* Hover durumunda yazı rengi koyu kalacak */
    }

.btn:hover .hover-effect {
    opacity: 1;
}


/* Butonlara hafif 3D efekti */
.btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
}

    .btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0));
        z-index: 2;
        transition: all 0.3s ease;
    }

    .btn:hover::after {
        background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    }

    /* Tıklama efekti */
.btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color:white!important;
}

/* Dalga efekti */
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ANASAYFA HERO SECTION BAŞLIK */
/* -------------------------------------------------- */

/* Modern Başlık Stilleri */
.hero-title {
    letter-spacing: -0.5px;
    color: #2c3e50;
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.title-line {
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.text-gradient-primary {
    background: linear-gradient(90deg, #0d6efd 0%, #0b5ed7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.text-underline-animation {
    position: relative;
    display: inline-block;
    color: #0d6efd;
}

    .text-underline-animation::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #0d6efd 0%, #0b5ed7 100%);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    }

.hero-title:hover .text-underline-animation::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Responsive ayarlar */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }
}

/* Nav-pills Gradient Stilleri */
.nav-pills .nav-link {
    border: 1px solid #dee2e6;
    color: #495057;
    background: white;
    transition: all 0.3s ease;
    border-radius: 0.5rem !important;
}

    /* Aktif olmayanlar için hover efekti */
    .nav-pills .nav-link:not(.active):hover {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        color: #0d6efd;
        border-color: #0d6efd;
    }

    /* Aktif (seçili) olan nav-item */
    .nav-pills .nav-link.active {
        background: linear-gradient(135deg, #0d6efd 0%, #003153 100%) !important;
        color: white !important;
        border-color: #0d6efd;
        box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    }

        /* Diğer renk alternatifleri (opsiyonel) */
        .nav-pills .nav-link.active.success {
            background: linear-gradient(135deg, #198754 0%, #157347 100%) !important;
            box-shadow: 0 4px 15px rgba(25, 135, 84, 0.3);
        }

        .nav-pills .nav-link.active.danger {
            background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%) !important;
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
        }

/* Renk Tanımları */
:root {
    --purple: #6f42c1;
    --purple-light: #8c68cd;
    --purple-dark: #563d7c;
}

.bg-purple {
    background-color: var(--purple);
}

.text-purple {
    color: var(--purple);
}

.btn-purple {
    background-color: var(--purple);
    color: white;
    border-color: var(--purple);
}

    .btn-purple:hover {
        background-color: var(--purple-dark);
        border-color: var(--purple-dark);
        color: white;
    }

/* İkon Çemberleri */
.icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-circle-sm {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

/* Düzeltilmiş Paket Kartları Stili */
.pricing-card {
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    overflow: hidden; /* Bu kritik öneme sahip */
    position: relative;
}

    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0, 49, 83, 0.175) !important;
    }

    .pricing-card .card-header {
        border-radius: 15px 15px 0 0;
        padding: 2rem 1rem;
        position: relative; /* Ekledik */
        z-index: 1; /* Ekledik */
        overflow: hidden; /* Ekledik */
    }

/* Öne Çıkan Paket İçin Düzeltme */
.featured-package {
    transform: translateY(-5px);
    z-index: 1;
}

    .featured-package .card-header {
        background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%) !important;
        border-radius: 15px 15px 0 0 !important;
    }

        /* Köşelerdeki beyaz boşlukları kesinlikle önlemek için */
        .featured-package .card-header:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
            z-index: -1;
            border-radius: 15px 15px 0 0;
        }

/* Ribbon Stilleri - Responsive */
.ribbon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    width: 85px;
    height: 88px;
    z-index: 10;
}

.ribbon {
    position: relative;
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%);
    transform: rotate(45deg);
    padding: 5px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* Mobil için özel ayarlar */
@media (max-width: 767.98px) {
    .ribbon-wrapper {
        display: none;
    }

    .card-header.bg-purple {
        padding-top: 3.5rem !important;
    }
}

/* Buton Efektleri */
.btn-package-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #003153 100%);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

    .btn-package-primary:hover {
        background: linear-gradient(135deg, #0b5ed7 0%, #094db9 100%);
        color: white;
    }

.btn-package-purple {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

    .btn-package-purple:hover {
        background: linear-gradient(135deg, var(--purple-light) 0%, var(--purple) 100%);
        color: white;
    }

.btn-package-danger {
    background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
}

    .btn-package-danger:hover {
        background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
        color: white;
    }

/* İkon Kutuları */
.icon-box {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Responsive Ayarlar */
@media (max-width: 767px) {
    .pricing-card {
        margin-bottom: 2rem;
    }

    .featured-package {
        transform: none;
    }

    .ribbon {
        display: none;
    }
}