/* Global Styles */

/* ወይም ሁሉንም ለመሸፈን */
* {
  font-display: swap !important;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
  --cyber-gold: #FFD700;
  --deep-gold: #FFC200;
  --obsidian-black: #111111;
  --pure-white: #FFFFFF;
  --light-grey: #F5F5F5;
  --dark-grey: #222222;
  --pure-black: #000000;
  --shadow-color: rgba(0,0,0,0.1);
}
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Poppins', sans-serif;
    line-height: 1.6;
    color: #111;
    background-color: #FFF;
    overflow-x: hidden; /* የጎን ስክሮልን ለመከላከል */
}

/* Header */
header {
    position: fixed; top: 0;left: 0; width: 100%; z-index: 9999; background: rgba(0, 0, 0, 0.9); padding: 15px 5%;  display: flex;justify-content: space-between; align-items: center; transition: background 0.3s ease;
}

header h1 {
    color: #FFD700; margin: 0; font-size: 1.8rem;}
/* Navigation Desktop */
#navMenu {
    display: flex;list-style: none; align-items: center; gap: 25px;}

#navMenu li a {text-decoration: none; color: #FFD700; font-weight: 500; font-size: 1.5rem; transition: 0.3s;}

#navMenu li a:hover { color: #FFD700;}
/* Language Toggle Logic */
.am { display: none; }
body.lang-am .en { display: none; }
body.lang-am .am { display: inline; }

.lang-btn {
    background-color: #FFCC00; color: #000; padding: 8px 20px; border-radius: 50px; font-weight: bold; cursor: pointer; border: none; transition: 0.3s;}

.lang-btn:hover {
    background-color: #e6b800; transform: translateY(-2px);}

/* Hero Section */
#home {height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #050a15 0%, #0a192f 100%);}

#home::before {content: "";position: absolute;top: -10%; left: -10%;width: 60%; height: 80%;background: radial-gradient(circle, rgba(0, 150, 255, 0.15) 0%, transparent 70%);
    filter: blur(80px);z-index: 1;}

.hero-content {position: relative; z-index: 10; max-width: 850px; padding: 0 20px;}

.main-title {font-size: 4rem;font-weight: 900;color: #FFCC00;margin-bottom: 20px;text-transform: uppercase; line-height: 1.1;}

.hero-subtitle {font-size: 1.25rem;color: #e0e0e0; margin-bottom: 40px;}

/* Buttons */
.hero-buttons { display: flex; justify-content: center; gap: 20px;}

.btn-login, .btn-register { padding: 14px 45px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: 0.3s;}

.btn-login { background: #FFCC00; color: #000; border: none;text-decoration: none; }
.btn-register { background: #FFCC00; color: #000; border: 2px;text-decoration: none;}

.btn-login:hover { background: #ffd633; transform: scale(1.05); }
.btn-register:hover { background: #ffd633; color: #000; }

/* Mobile Menu & Toggle Button */
.toggle-btn { display: none;  flex-direction: column;  cursor: pointer;  gap: 5px;}

.toggle-btn span {width: 30px;height: 3px;background: #FFD700;transition: 0.3s;}
/* Footer */
footer {background-color: #111;padding: 20px;text-align: center;color: #FFD700;font-size: 0.9em;}
/* ለሞባይል ብቻ */
@media (max-width: 768px) {
    #navMenu {display: none;flex-direction: column;position: absolute;top: 70px; right: 0; width: 35%;  background-color: #111;
        padding: 20px; z-index: 1000;}

    /* JavaScript ሜኑውን ሲከፍተው ይህ ይሠራል */
    #navMenu.active { display: flex !important;}

    .toggle-btn { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }

    .toggle-btn span { width: 25px; height: 3px; background-color: #FFCC00; transition: 0.3s; }}
/* service section*/
.services-section {padding: 100px 5%;background-color: #FFFFFF; text-align: center;}
.services-section h3 {font-size: 1.6rem; color: #FFCC00; margin-bottom: 40px;}
.services-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto;  justify-content: center;}
.service-box {background: var(--dark-grey);}
.service-box p {color: var(--pure-white); line-height: 1.5;}
.service-title::after {
    content: '';
    display: block;
    width: 50%;
    height: 3px;
    background: var(--cyber-gold);
    margin: 10px auto;
}
   
.service-box:hover { border-color: #FFB700;  transform: translateY(-10px);}
.service-icon {font-size: 3rem;color: #FFB700;margin-bottom: 20px;}
@media (max-width: 1024px) {
    .services-grid {  grid-template-columns: repeat(2, 1fr);  }}

@media (max-width: 768px) {
 .services-grid { grid-template-columns: 1fr; } 
    .service-box { min-height: auto; }}
/* --- About Section Styling --- */
.about-section {padding: 80px 10%; background-color: var(--pure-white);  color: var(--pure-black);  text-align: center;}

.section-title { font-size: 2.5rem; color: var(--cyber-gold); margin-bottom: 20px; text-transform: uppercase; position: relative; display: inline-block;}

/* ከርዕሱ ስር ያለች መስመር */
.section-title::after { content: ''; display: block; width: 50%; height: 3px; background: var(--cyber-gold); margin: 10px auto;}

.about-section > p { font-size: 1.1rem; max-width: 800px; margin: 0 auto 50px; line-height: 1.6; color: var(--pure-black);}

/* Info Box Container */
.about-grid {display: flex;flex-wrap: wrap;gap: 25px;justify-content: center;}

.info-box {background: var(--dark-grey);padding: 30px;border-radius: 15px;flex: 1;min-width: 280px;max-width: 350px;transition: transform 0.3s ease, border 0.3s ease;
    border: 1px solid transparent; text-align: left;}

.info-box:hover {
    transform: translateY(-10px);
    border: 1px solid var(--cyber-gold);}

.info-box h3 { color: var(--cyber-gold); margin-bottom: 15px; font-size: 1.5rem;}

.info-box p, .info-box ul {color: var(--light-grey);line-height: 1.5;}

.info-box ul {padding-left: 20px;}

.info-box ul li {margin-bottom: 8px;}

/* Responsive */
@media (max-width: 768px) {
    .section-title { font-size: 2rem; }
    .about-section { padding: 50px 5%; }
}
/* contact-section*/
.contact-section { padding: 80px 5%; display: flex; justify-content: center;align-items: center;}
.whatsApp-card { background: #20b454;  padding: 50px;  text-align: center;  border-radius: 25px;  max-width: 700px;  margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);}
.whatsApp-card i { font-size: 5rem; color: var(--pure-white); margin-bottom: 20px; }
.whatsApp-card h3, .whatsApp-card h4 { color: var(--whatsapp-dark); margin-bottom: 10px; }
.whatsApp-card p { color: #555; margin-bottom: 25px; }

.whatsApp-btn { background-color: var(--whatsapp-green) !important; color: white !important; padding: 16px 40px; border-radius: 50px; text-decoration: none; font-weight: 800;
    display: inline-block;transition: var(--transition);box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);}
.whatsApp-btn:hover { background-color: #FFB700 !important; transform: scale(1.05); }
/* FAQ Section Styles */
.faq-container { max-width: 900px; margin: 60px auto;  padding: 20px;  font-family: 'Inter', sans-serif;}

.faq-header { text-align: center;  margin-bottom: 40px;}

.faq-header h2 { font-size: 2rem; color: #FFB700;  margin-bottom: 10px;}

.faq-header p {color: var(--pure-black);}

.faq-item { background: #ffffff; border: 3px solid var(--cyber-gold); border-radius: 10px; margin-bottom: 15px; overflow: hidden;
    transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.09);}

.faq-item[open] {
    border-color: #007bff;  box-shadow: 0 5px 15px rgba(0,0,0,0.1);}

summary { padding: 20px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
    color: #333;}

summary::-webkit-details-marker { display: none;}

/* ከጥያቄው ጎን ምልክት ለመጨመር */
summary::after { content: '+'; font-size: 1.5rem; color: #007bff; transition: transform 0.3s ease;}

details[open] summary::after {content: '-'; transform: rotate(180deg)}

.faq-answer {  padding: 0 20px 20px 20px; color: #555; line-height: 1.6; animation: slideDown 0.4s ease-out;}

/* አኒሜሽን */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to {  opacity: 1;  transform: translateY(0); }}
.cta-section { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; padding: 80px 20px; text-align: center;
    margin-top: 40px;}

.cta-content h2 {font-size: 2.5rem;margin-bottom: 20px;}

.cta-content p {  font-size: 1.2rem;  margin-bottom: 30px;  opacity: 0.9;  max-width: 700px;  margin-left: auto;  margin-right: auto;}

.cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;}

.btn-primary { background-color: white; color: #007bff; padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: bold;
 transition: transform 0.3s ease;}

.btn-primary:hover { transform: scale(1.05);}
/* ለስልክ ስክሪን እንዲመች */
@media (max-width: 600px) {
    .cta-content h2 {
        font-size: 1.8rem; }}
.portfolio-section {padding: 80px 5%; background-color: var(--pure-white); color: var(--pure-black); text-align: center;}
.portfolio-section h2 {font-size: 2.5rem; color: var(--cyber-gold); margin-bottom: 20px; text-transform: uppercase; position: relative; display: inline-block;}
.portfolio-section h2::after {content: ''; display: block; width: 50}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
align-items: center;
}

.project-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
align-items: center;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-card-content {
    padding: 15px;
}

.btn-view {
    display: inline-block;
    padding: 8px 15px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}