#Step .bg-orange-box {
position: relative;
}
#Step .bg-orange-box::after {
position: absolute;
top: -3px; /* Kartın dışından başlayacak */
bottom: -3px;
left: -3px;
right: -3px;
content: "";
z-index: -1; /* Kartın içeriğinin altında kalması için */
border-radius: 10px; /* Kart ile aynı border-radius */
background: linear-gradient(71deg, #0d1212, #f33518, #0d1212); /* Gradient arka plan */
}
/* Step Section */
#Step {
padding: 5rem 0; /* Üst ve alt boşluk */
}
/* Kartların Konteyneri */
#Step .container {
display: flex; /* Flexbox kullanımı */
justify-content: center; /* Ortada hizalama */
flex-wrap: wrap; /* Responsive tasarım için */
}
/* Kart Stili */
#Step .card {
background-color: #090909; /* Kart arka plan rengi */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Gölge efekti */
width: 20%; /* Kart genişliği */
margin: 1rem; /* Kartlar arasındaki boşluk */
padding: 2rem; /* İçerik boşluğu */
text-align: center; /* Metni ortalama */
position: relative; /* Pseudo-element ile ilişkilendirmek için */
transition: transform 0.3s, box-shadow 0.3s; /* Hover efekti için geçiş */
}
/* Hover efekti */
#Step .card:hover {
transform: translateY(-5px); /* Hover sırasında yukarı kaydırma */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Hover sırasında gölgeyi güçlendirme */
}
#Step .Step-Icon {
font-size: 40px;
transition: font-size 0.3s ease;
font-size: 35px;
}
#Step .Step-Title {
font-family: "Space Grotesk", "Space Grotesk Placeholder", sans-serif;
font-size: 18px;
text-transform: uppercase;
color: #556a86;
margin-bottom: 20px;
}
#Step .Step-Text {
color: #d25200;
font-size: 20px;
}
/* Mobil için ayarlar */
@media (max-width: 991px) {
#Step .container {
flex-direction: column; /* Kartları alt alta yerleştir */
align-items: center; /* Kartları ortala */
}
#Step .card {
width: 100%; /* Kart genişliğini %100 yap */
margin: 0.5rem 0; /* Kartlar arasındaki boşluğu ayarla */
}
}