body{
    margin: 0px;
    padding: 0px;
    background-color: rgba(65, 56, 56, 0.7);
}
/* فقط در دسکتاپ */
@media (min-width: 992px) {
  .desktop-gap > .col-lg-3 {
    margin-right: 40px; /* فاصله بین کارت‌ها */
    margin-left: 40px;
  }

  /* مرکز کردن کارت‌ها */
  .desktop-gap {
    justify-content: center;
  }
}
.bg-me{
    background-color: rgba(65, 56, 56, 0.7);
}

.head-countiner{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 700px;
    background-image: url("../img/low-angle-view-skyscrapers_374835.jpg");
    background-size:cover;
    background-repeat: no-repeat;
}
.bar-countiner{
    text-align: right;
    margin: 0px;
    width: 100%;
    height: 100px;
    background-color: rgba(65, 56, 56, 0.7);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.logo-head{
  margin-right: 10PX;
    width: 100px;
    height: auto;
    
}
.item-menu{
    margin-right: 40px;
    color: azure;
    font-size: large;
    text-decoration: none;

}
.item-menu:hover{
    
    color: black;
}
.continer1{
    width: 100%;
    height: 500px;
    background-color: rgba(65, 56, 56, 0.7);
    
}
.text-continer1{
 height: 100%;
 width: 70%;
}
.img-continer1{
    height: 100%;
    width: 30%;

}
.img-c1{
    width: 80%;
    height: 80%;
   object-fit: 100% 100%;   /* تصویر رو برش می‌ده تا باکس پر بشه */
  object-position: center;
    border-radius: 20px;

}

.text-c1{
    width: 80%;
    margin: 10%;
    margin-bottom: 5px;
    margin-top: 0px;
    color:white;

}
.head-c1{
    margin-top: 40px;
    margin-right: 8%;
    margin-bottom: 5%;
    color:white;
}
.numbering-countiner{
     background-color: rgba(65, 56, 56, 0.7);
     width: 100%;
     height: 200px;
     gap: 4rem
}

.counter {
      font-size: 3rem;
      color: #0088ff;
      
    }
    .card {
      background-color: #1a1a1a;
      border: 2px solid #0088ff;
      border-radius: 1rem;
      box-shadow: 0 0 10px rgba(0, 88, 256, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
        margin: 0 40px; 
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 20px rgba(0, 88, 256, 0.3);
    }
    /* text */

    .about-text {
  line-height: 2;
  max-width: 900px;
 }
    /* 3 box */
.box {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.box:hover {
  transform: scale(1.03);
}

/* لایه پیش‌فرض پایین (۲۰٪) */
.pre-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.3s ease;
}

.pre-overlay p {
  margin: 0;
  font-weight: 600;
}

.pre-overlay .more-text {
  font-size: 0.9rem;
  color: #f8f9fa;
  opacity: 0.8;
}

/* لایه overlay اصلی (از پایین بالا میاد) */
.overlay {
  position: absolute;
  bottom: -70%;
  left: 0;
  width: 100%;
  height: 70%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  transition: bottom 0.5s ease;
}

.box:hover .overlay {
  bottom: 0;
}

/* موقع هاور، لایه پیش‌فرض محو بشه */
.box:hover .pre-overlay {
  opacity: 0;
}

/* دکمه‌ها */
.overlay .btn {
  background-color: #0d6efd;
  border: none;
  color: #fff;
  font-weight: 600;
}
.features-section{
  background-color: rgba(65, 56, 56, 0.7);
}
@media (max-width: 650px) {
  .logo-head{
    width: 70PX;
    height: auto;
  }
    .head-countiner{
        height: 500px;
    }
    .top-row {
        flex-direction: column;
        align-items: center;
      }
    .bar-countiner{
        height: 80px;
    }
    

    .item-menu{
        margin-right: 20px;
        font-size: medium;

    }
    .continer1{
        height: 350px;
    }
    .text-continer1{
        width: 55%;
    }
    .img-continer1{
        width: 45%;
     }
    .img-c1{
        width: 90%;
        height: 60%;
    }
    .text-c1{
    width: 80%;
    margin: 10%;
    font-size: 10px;

    }
   .head-c1{
    margin-top: 40px;
    margin-right: 8%;
    font-size: 15px;
    } 
  .top-row .box,
  .bottom-row .box {
    height: 250px; /* اندازه باکس‌ها در موبایل */
    width: 100%;  /* هم‌اندازه شدن باکس‌ها */
    margin-bottom: 15px; /* فاصله بین باکس‌ها */
  }

  .bottom-row {
    margin-top: 0;
  }

 /*  */
   .color-grid {
      row-gap: 0.75rem !important; /* فاصله عمودی کمتر */
    }

    /* باکس‌ها عریض‌تر و فاصله کمتر بینشون */
    .color-grid .col-6 {
      flex: 0 0 48% !important; /* عرض هر باکس بیشتر از نصف صفحه */
      max-width: 48% !important;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
    }

    /* خود کارت کمی کشیده‌تر به عرض */
    .color-grid .card {
      width: 100%;
      border-radius: 0.75rem;
    }

    /* تصویر فیکس به عرض با ارتفاع متناسب */
    .color-grid img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-radius: 0.75rem 0.75rem 0 0;
    }

    .color-grid .card-text {
      font-size: 0.9rem;
      font-weight: 500;
    }
  

}