/* ---------------- Reset & Base ---------------- */
* {margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
body {background:#f5f7fb; color:#222; transition:0.3s;}
body.english {direction:ltr;}

/* ---------------- Variables ---------------- */
:root {
  --primary:#0a74da;
  --accent:#ff9800;
  --dark:#222;
  --light:#fff;
  --shadow:0 6px 20px rgba(0,0,0,0.1);
  --bg:#f5f7fb;
}

/* HEADER STYLING */
header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  z-index: 999;
  transition: 0.3s;
}


/* ---------------- HERO ---------------- */
.hero {background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://acrepairingshop.com/img/bg11.jpg'); background-size:cover; background-position:center; color:white; text-align:center; padding:130px 20px;}
.hero h1 {font-size:3rem; margin-bottom:16px;}
.hero p {max-width:900px; margin:auto; line-height:1.7; font-size:1.2rem;}
.hero-buttons {margin-top:25px; display:flex; justify-content:center; gap:15px; flex-wrap:wrap;}
.btn {padding:14px 32px; border-radius:50px; color:white; text-decoration:none; font-weight:bold; transition:0.3s;}
.btn.call {background:var(--primary);}
.btn.whatsapp {background:#25D366;}
.btn:hover {transform:translateY(-4px);}

/* ---------------- Section ---------------- */
.section {padding:70px 20px; max-width:1200px; margin:auto;}
.section h2 {text-align:center; color:var(--primary); margin-bottom:40px; font-size:2.3rem; position:relative;}
.section h2::after {content:''; width:120px; height:4px; background-color:var(--accent); display:block; margin:10px auto 0; border-radius:2px;}


/* ---------------- Repair Services Section ---------------- */
#repair-services {
    padding: 60px 20px;
    background-color: #f5f7fb;
}

#repair-services h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 50px;
    position: relative;
}

#repair-services h2::after {
    content: '';
    width: 120px;
    height: 4px;
    background-color: var(--accent);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Services Grid */
#repair-services .services {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 boxes per row on large screens */
    gap: 30px;
    justify-items: stretch;
}

#repair-services .service {
    background-color: var(--light);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 25px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#repair-services .service:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

#repair-services .service i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
}

#repair-services .service h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--primary);
}

#repair-services .service p {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #555;
}

#repair-services .service-features {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    text-align: left;
}

#repair-services .service-features li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: #333;
}

#repair-services .service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

/* For English / LTR */
body.english #repair-services .service-features li::before {
    left: auto;
    right: 0;
}

/* Buttons */
#repair-services .btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 50px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
    margin-top: 10px;
}

#repair-services .btn.call {
    background-color: var(--primary);
}

#repair-services .btn.call:hover {
    background-color: #006699;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 136, 204, 0.3);
}

#repair-services .btn.whatsapp {
    background-color: #25D366;
}

#repair-services .btn.whatsapp:hover {
    background-color: #1da851;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
    #repair-services .services {
        grid-template-columns: repeat(3, 1fr); /* 3 per row */
    }
}

@media (max-width: 992px) {
    #repair-services .services {
        grid-template-columns: repeat(2, 1fr); /* 2 per row */
    }
}

@media (max-width: 600px) {
    #repair-services .services {
        grid-template-columns: 1fr; /* 1 per row on small screens */
    }

    #repair-services .service-features {
        text-align: right;
    }
}

/* ---------------- Services ---------------- */
.services {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Always 4 boxes in a row on desktop */
    gap: 25px;
}

.service {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.service:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.service i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 12px;
}

.service h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--primary);
}

.service p {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #555;
}

.service-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 20px;
}

.service-features li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: #333;
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

body.english .service-features li::before {
    left: auto;
    right: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .services {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
    }
}

@media (max-width: 768px) {
    .services {
        grid-template-columns: 1fr; /* 1 per row on mobile */
    }
}

/* ---------------- Process ---------------- */
.process {display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:25px;}
.process-step {background:white; padding:25px; border-radius:16px; box-shadow:var(--shadow); text-align:center; transition:0.3s;}
.process-step i {font-size:2.5rem; color:var(--primary); margin-bottom:12px;}
.process-step:hover {transform:translateY(-6px);}

/* ---------------- Brands ---------------- */
.brands {display:flex; flex-wrap:wrap; justify-content:center; gap:25px;}
.brand {background:white; padding:18px 25px; border-radius:12px; box-shadow:var(--shadow); transition:transform 0.3s;}
.brand img {height:50px; width:auto;}
.brand:hover {transform:scale(1.05);}

/* ---------------- Testimonials ---------------- */
.testimonials {display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:25px;}
.testimonial {background:white; padding:22px; border-radius:16px; box-shadow:var(--shadow); text-align:center; transition:0.3s;}
.testimonial:hover {transform:translateY(-6px); font-weight:bold;}

/* ---------------- Contact ---------------- */
.contact {display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.contact-box {background:white; padding:25px; border-radius:16px; box-shadow:var(--shadow);}
.contact-box input, textarea {width:100%; padding:12px; margin:8px 0; border-radius:8px; border:1px solid #ccc;}
.contact-box button {width:100%; border:none; background:var(--primary); color:white; padding:12px; border-radius:50px; cursor:pointer; font-weight:bold; transition:0.3s;}
.contact-box button:hover {background:#006699; transform:translateY(-3px);}

/* ---------------- Contact Section ---------------- */
.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: auto;
}

.contact-box {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.contact-box h3 {
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 1.5rem;
    text-align: center;
}

.contact-box p {
    font-size: 1rem;
    margin: 12px 0;
    color: #555;
}

.contact-box p i {
    color: var(--primary);
    margin-right: 10px;
}

body.english .contact-box p i {
    margin-left: 10px;
    margin-right: 0;
}

.contact-box .form-group {
    margin-bottom: 15px;
}

.contact-box input,
.contact-box textarea,
.contact-box select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 1rem;
}

.contact-box select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg fill="%230a74da" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 12px center;
    background-size: 18px;
    padding-right: 40px;
    cursor: pointer;
}

.contact-box textarea {
    resize: none;
}

.contact-box .btn {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    color: white;
    background: var(--primary);
    cursor: pointer;
    transition: 0.3s;
}

.contact-box .btn:hover {
    background: #006699;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 992px) {
    .contact {
        grid-template-columns: 1fr;
    }
    .contact-box {
        text-align: center;
    }
}

/* Map Section */
        .map-section {
            margin: 60px 0;
        }

        .map-container {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 30px;
        }
/* ---------------- Footer ---------------- */
footer {background:var(--dark); color:white; padding:45px 20px; text-align:center;}

/* ---------------- Floating Buttons ---------------- */
.floating {position:fixed; bottom:25px; left:20px; display:flex; flex-direction:column; gap:14px; z-index:999;}
body.english .floating {left:auto; right:20px;}
.float-btn {width:60px; height:60px; border-radius:50%; display:flex; justify-content:center; align-items:center; color:white; font-size:1.7rem; text-decoration:none; box-shadow:var(--shadow);}
.float-btn.call {background:var(--primary);}
.float-btn.whatsapp {background:#25D366;}

/* ---------------- Bilingual ---------------- */
.arabic-text {direction:rtl;}
.english-text {direction:ltr;}

/* ---------------- Responsive ---------------- */
@media(max-width:768px){.contact{grid-template-columns:1fr;}.section h2{font-size:2rem;}.service-features{text-align:right;}}
@media(max-width:480px){.service{padding:20px;}.service i{font-size:2.2rem;}.btn{width:100%; text-align:center;}}