<!DOCTYPE html><html lang="ar"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> Depth branches</title><style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Tahoma,Arial,sans-serif;
background:#f8f8f8;
padding:20px;
}
.branches-container{
max-width:1200px;
margin:auto;
}
.accordion-item{
margin-bottom:12px;
}
.accordion-header{
width:100%;
border:none;
cursor:pointer;
padding:18px 20px;
background:#6e2d49;
color:#fff;
font-size:22px;
font-weight:700;
border-radius:12px;
text-align:right;
transition:.3s;
}
.accordion-header:hover{
background:#5c253d;
}
.accordion-content{
display:none;
padding-top:15px;
}
.branch-card{
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
border:2px solid #6e2d49;
border-radius:24px;
overflow:hidden;
margin-bottom:15px;
box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.branch-logo{
width:140px;
background:#6e2d49;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:bold;
padding:25px 15px;
text-align:center;
margin: .8rem;
border-radius: 1rem;
}
.branch-name{
flex:1;
padding:25px;
text-align:center;
font-size:24px;
font-weight:700;
color:#6e2d49;
}
.branch-btn-wrap{
padding:20px;
}
.branch-btn{
display:inline-block;
background:#6e2d49;
color:#fff;
text-decoration:none;
padding:14px 22px;
border-radius:10px;
font-size:15px;
font-weight:bold;
transition:.3s;
}
.branch-btn:hover{
background:#542137;
}
@media(max-width:768px){
.branch-logo{margin: 0}
.branch-card{
flex-direction:column;
}
.branch-logo{
width:100%;
}
.branch-name{
font-size:18px;
padding:15px;
}
.branch-btn-wrap{
padding-bottom:20px;
}
}
</style></head><body style=";text-align:left;direction:ltr">
{
const item = document.createElement("div");
item.className = "accordion-item";
const header = document.createElement("button");
header.className = "accordion-header";
header.textContent = section.title;
const content = document.createElement("div");
content.className = "accordion-content";
section.links.forEach(branch => {
const card = document.createElement("div");
card.className = "branch-card";
card = `
📍 العنوان
${branch.name}
`;
content(card);
});
header.addEventListener("click",()=>{
document.querySelectorAll(".accordion-content")
.forEach(el=>{
if(el!==content){
el.style.display="none";
}
});
content.style.display =
content.style.display==="block"
? "none"
: "block";
});
item(header);
item(content);
container(item);
});
</body></html>
