* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            
            line-height: 1.6;
            color: #333;
            background-color: #D9D9D9;
        }

/* استایل هدر */
        header {
            grid-area: header;
            background-color: #036A7F ;
            color: white;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            font-family: Arial, Helvetica, sans-serif;   

        }
        .htitle {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Layout */
.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  min-height: calc(100vh - 160px);
}

/* Sidebar */
.sidebar {
  width: 250px;
  background-color: #04849C;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.sidebar-image {
  width: 100%;
  height: 120px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
  border: 3px solid #fff;
  background-color:#BFBFBF;
}
.sidebar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-text,
.side-text2 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}
.side-text h2 { color:#fff; font-size: 3rem; margin-bottom: 15px; }
.side-text2 h2 { color:#fff; font-size: 2rem; }

/* Content */
.main-content {
  flex: 1;
  padding: 20px;
  
}
.describe {
  text-align: center;
  margin-right:0px;
  width: 38%;
  border: 2px solid #0e5a69;
  border-radius: 8px;
  padding: 3px;
  height: fit-content;
  margin-top: 20px;
}
.property-title { color:#333; text-align:center; padding:10px; }
.property-description {
  color:#7f8c8d;
  background-color: #fff;
  line-height: 1.6;
  text-align: center;
  display: flex;
  gap: 20px;
  height: 300px;
  overflow-y: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Gallery */
.media-section { margin-bottom:20px;
margin-right: -10px; }
.gallery-container { position: relative; margin-bottom: 0; }
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 10px;
}
.gallery-item { display: none; border-radius:8px; }
.gallery-item.active { display: block; }
.gallery-item img { width:100%; height:300px; object-fit:cover; }
.gallery-nav {
  position: absolute; top:50%; width:100%;
  display:flex; justify-content:space-between;
  transform:translateY(-50%); padding:0 15px;
}
.gallery-nav button {
  background: rgba(52,152,219,0.8);
  color:white; border:none; border-radius:50%;
  width:50px; height:50px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.3s;
  font-size:20px;
}
.gallery-nav button:hover { background: rgba(41,128,185,0.9); }

/* Video */
.video-container {
  background:white;
  border-radius:0 0 8px 8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  margin-top:0;
}
.video-placeholder {
  height:300px; width:100%;
  display:flex; align-items:center; justify-content:center;
  color:#7f8c8d; font-weight:bold;
}
.error{
    text-align: center;
    height: 300px;
    align-content: center;
    font-size: 40px ;

}

/* Info Section */
.info-section {
  background:white; padding:20px; border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.specs-box { padding:15px; border-radius:8px; margin-bottom:20px; }
.specs-box h3 { color:#2c3e50; margin-bottom:15px; text-align:center; }
.spec-item {
  display:flex; justify-content:space-between;
  padding:8px 0; border-bottom:2px dashed #ddd;
}
.spec-item:last-child { border-bottom:none; }
.spec-label { font-weight:bold; color:#2c3e50; }
.spec-value { color:#7f8c8d; }

/* Form */
.contact-form {
  margin:60px auto; max-width:350px;
  background:#fff; padding:20px;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  text-align: center;
  
}
.form-description {
  text-align:center; color:#7f8c8d;
  margin-bottom:20px; font-size:13px;
}
.form-group { margin-bottom:15px; direction:rtl;
font-size: 13px; }
.form-group label {
  display:block; margin-bottom:5px;
  color:#2c3e50; font-weight:bold;
}
.form-group input {
  width:100%; padding:10px;
  border:1px solid #ddd; border-radius:4px; font-size:12px;
}
input::placeholder { text-align:center; opacity:0.5; color:#333; }
input { color:#0e5a69; text-align:center; }
.submit-btn {
  padding:9px; background:#32a852; color:white;
  border:none; border-radius:4px; font-size:10px;
  cursor:pointer; transition:background 0.3s;
}
.submit-btn:hover { background:#2980b9; }
.alert{
    color: red;
    font-size: 13px;
}
.massage{
    color: #32a852;
    font-size: 13px;
}

/* استایل فوتر */
        footer {
            grid-area: footer;
            background-color: #036A7F ;
            color: white;
            padding: 1rem 5rem;
            text-align: center;
             line-height: 1.6;
             position: relative;

        }
        
        .footer-content {
            max-width: 500px;
            margin: 0 auto;
            line-height: 2rem;
            padding: 1rem 3rem ;
            padding-bottom: 1rem;
            display: block;
            
    
        }

        .loc{ 
    position: relative;
    text-decoration: none;
    border-bottom: 1px solid #fff;        
}
 .flink{
    text-decoration: none;
        color: #fff;
        
}
.flink:hover{
    color: aquamarine;
}


 iframe{
    width: 50%;
    height: 50%;
    padding-top: 1rem;

 }

 .call{
    border-bottom: 1px solid #fff;  
    padding: 1rem;  

 }
  .copyright{
    font-size: 13px;
 }
 /* پایان فوتر */
/* Responsive */
@media (max-width: 900px) {
  .container { flex-direction: column; align-items: stretch; }
  .describe { order:0; width:100%; margin:0 0 20px 0; }
  .main-content { order:1; width:100% !important; margin:0 0 20px 0; }
  .sidebar { order:2; width:100%; margin-top:20px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item img { height:auto; }
}