body {
font-family: sans-serif;
background:linear-gradient(135deg, #1a0f0a,#2b1a12);
color: (white);
margin: 0;
padding: 0;
direction: rtl;
}

.container {

width: 90%;
margin: auto;
padding: 20px 0;
}

.title {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
color: #fb923c;
}

.card {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(251,146,60,0.1);
border-radius: 15px;
margin-bottom: 20px;
padding: 15px;
backdrop-filter: blur(10px);
transition: 0.3s;
overflow: hidden;
}

.card:hover {
transform: scale(1.02);
}

.card img {
width: 100%;
height: 100%;
border-radius: 10px;
margin-left: 15px;
}

.card .text {
    text-align: right;
    padding: 5px;
flex: 1;
}

.card h2 {
margin: 0 0 10px;
color: #fdba74;}
.card p {
line-height: 1.8;
color: #e2e8f0;
}
/* 🔥 Hover بۆ کۆمپیوتەر */
.card:hover {
transform: translateY(-5px);
}

/* 💻 Tablet */
@media (min-width: 600px) {
.card img {
height: 50%;
}
}

/* 💻 Laptop & Desktop */
@media (min-width: 900px) {

.container {
width: 75%;
}

.card {
flex-direction: row; /* 👈 لە تەنیشت */
align-items: center;
padding: 15px;
}

.card img {
width: 50%;
height: 50%;
border-radius: 10px;
margin-left: 15px;
}

.card .text {
text-align: right;
}
}
/* 🔻 Footer */
.footer {
text-align: center;
padding: 30px 0;

margin-top: 30px;
}

.footer h3 {
color: #facc15;
margin-bottom: 15px;
}

.social-icons {
display: flex;
justify-content: center;
gap: 15px; /* بۆ دووری */
margin-top: 20px;
}

.social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: rgba(250,204,21,0.1); /* gold */
border-radius: 50%; /* 👈 گۆڵ */
transition: 0.3s;
}

.social-icons img {
width: 24px;
height: 24px;
}

/* 🔥 hover */
.social-icons a:hover {
transform: scale(1.2);
background: #facc15;
}

.social-icons a:hover img {
filter: brightness(0); /* وێنە ڕەش دەکات */
}


.back-btn {
position: fixed;
bottom: 70px;
left: 20px;


background: rgba(255, 255, 255, 0.15); /* شفاف */
border: 1px solid rgba(255, 255, 255, 0.3);

color: white;
padding: 10px 15px;
border-radius: 12px;

backdrop-filter: blur(10px); /* ئەو effect ـەی glass */
-webkit-backdrop-filter: blur(10px);

cursor: pointer;
}


.back-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.05);
transition: 0.3s;
}