@media (min-width:678px) and (max-width:991px){

    .project-grid{
        grid-template-columns:1fr;
    }

    .project-card{
        display:flex;
        flex-direction:row;
        height:220px;
    }

    /* Even cards reverse */
    .project-card:nth-child(even){
        flex-direction:row-reverse;
    }

    .project-img{
        width:45%;
        height:220px;
    }

    .project-content{
        width:55%;
        padding:20px;
    }
}

.project-card{
    opacity:0;
    transform:translateY(50px);
    animation:fadeUp 0.8s ease forwards;
}

.project-card:nth-child(1){ animation-delay:0.1s; }
.project-card:nth-child(2){ animation-delay:0.2s; }
.project-card:nth-child(3){ animation-delay:0.3s; }
.project-card:nth-child(4){ animation-delay:0.4s; }
.project-card:nth-child(5){ animation-delay:0.5s; }
.project-card:nth-child(6){ animation-delay:0.6s; }

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


.project-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* Card */
.project-card{
    display:flex;
    background:#faf8f2;
    overflow:hidden;
    height:220px;
}

/* Image */
.project-img{
    width:45%;
    height:220px;
    flex-shrink:0;
}

.project-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Content */
.project-content{
    width:55%;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.project-content h3{
    color:#000;
    font-size:24px;
    margin-bottom:8px;
    line-height:1.2;
}

.project-content p{
    color:#000;
    font-size:16px;
    line-height:1.5;
    margin-bottom:0;
}

.project-content a{
    color:#d4a74f;
    font-weight:600;
    margin-top:10px;
}

.project-content a:hover{
    color:#000;
}

/* Tablet */
@media (max-width:991px){

    .project-grid{
        grid-template-columns:1fr;
    }

    .project-card{
        height:220px;
    }
}

/* Mobile */
@media (max-width:767px){

    .project-card{
        flex-direction:column;
        height:auto;
    }

    .project-img{
        width:100%;
        height:220px;
    }

    .project-content{
        width:100%;
        padding:20px;
    }

    .project-content h3{
        font-size:22px;
    }
}






/* MAIN BIG IMAGE */
.project-main {
  position: relative;
  overflow: hidden;

}

.project-main img {
  width: 100%;
  height: 550px;
  object-fit: cover;
}
.content-inner{
    padding-bottom: 80px;
}

/* SMALL IMAGES */
.project-small {
  position: relative;
  overflow: hidden;

  margin-bottom: 20px;
}

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

/* OVERLAY */
.project-main .overlay,
.project-small .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* TEXT BOX */
.project-text {
  padding: 10px 5px;
}

.project-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* HOVER EFFECT */
.project-main img,
.project-small img {
  transition: 0.4s ease;
}

.project-main:hover img,
.project-small:hover img {
  transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 767px) {
  .project-main img {
    height: 300px !important;
  }

  .project-small img {
    height: 300px !important    ;
  }
}

/* Only image overlay titles */
.project-main .overlay h3,
.project-small .overlay h4 {
  color: #ffffff !important;
}
.project-main .overlay,
.project-small .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;

  /* 👇 background overlay only */
  background: rgba(0, 0, 0, 0.40);

  color: #fff;
}

/* MAIN IMAGE */
.project-main img,
.project-small img {
  width: 100%;
  height: 300px;   /* same height everywhere */
  object-fit: cover;
  display: block;
}

/* If you want BIG image slightly bigger */
.project-main img {
  height: 620px;
}


/* =========================
   TABLET ONLY
========================= */
@media (max-width: 768px) {
  /* increase first image height */
  .project-main img {
    height: 500px;   /* 👈 taller on tablet */
  }

  /* keep small images same */
  .project-small img {
    height: 240px;
  }
}

/* =========================
   FEATURE BOX
========================= */
.feature-box {
  position: relative;

  overflow: hidden;
}

.feature-box img {
  width: 100%;
  height:570px;
  object-fit: cover;
}

/* =========================
   STACKED RIGHT BOX
========================= */
.stack-box {
  position: relative;

  overflow: hidden;
}

.stack-box img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* =========================
   SMALL CARDS
========================= */
.card-box {
  position: relative;

  overflow: hidden;
}

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

/* =========================
   OVERLAY (COMMON)
========================= */
.feature-box .overlay,
.stack-box .overlay,
.card-box .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color: #fff;
}

.overlay h3,
.overlay h4 {
  margin: 0;
  color: #fff;
}

/* =========================
   HOVER EFFECT
========================= */
.feature-box img,
.stack-box img,
.card-box img {
  transition: 0.4s ease;
}

.feature-box:hover img,
.stack-box:hover img,
.card-box:hover img {
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px) {
  .feature-box img {
    height: 380px;
  }

  .stack-box img {
    height: 220px;
  }
}

@media (max-width: 576px) {
  .feature-box img {
    height: 280px;
  }

  .stack-box img,
  .card-box img {
    height: 200px;
  }
}
/* STACKED RIGHT BOX (increased height) */
.stack-box img {
  width: 100%;
  height: 280px;   /* increased from 240px */
  object-fit: cover;
}

/* SMALL CARDS (bottom row) */
.card-box img {
  width: 100%;
  height: 250px;   /* increased from 220px */
  object-fit: cover;
}
/* BOTTOM ROW IMAGES (SECOND ROW) */
.card-box img {
  width: 100%;
  height: 300px;   /* increased height */
  object-fit: cover;
}

/* CARD IMAGE WRAPPER */
.card-img {
  position: relative;
  overflow: hidden;
 
}

/* IMAGE */
.card-img img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: 0.4s ease;
}

/* OVERLAY BACKGROUND */
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 15px;
  background: rgba(0, 0, 0, 0.40); /* 👈 overlay bg */

  color: #fff;
}

/* TITLE */
.card-overlay h4 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 5px;
}

/* PARAGRAPH */
.card-overlay p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* HOVER EFFECT */
.card-box:hover img {
  transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 576px) {
  .card-img img {
    height: 200px;
  }
}


/* =========================
   COMMON IMAGE WRAPPER
========================= */
.feature-box,
.stack-box {
  position: relative;
  overflow: hidden;

}

/* =========================
   IMAGES
========================= */
.feature-box img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

.stack-box img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* =========================
   BACKGROUND OVERLAY (TEXT AREA)
========================= */
.feature-box .overlay,
.stack-box .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 15px;
  background: rgba(0, 0, 0, 0.4);  /* 👈 BG OVERLAY */
  color: #fff;
}

/* =========================
   TITLE STYLE
========================= */
.feature-box .overlay h3,
.stack-box .overlay h4 {
  color: #fff;
  margin-bottom: 5px;
  font-weight: 600;
}

/* =========================
   PARAGRAPH STYLE
========================= */
.feature-box .overlay p,
.stack-box .overlay p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* =========================
   HOVER EFFECT
========================= */
.feature-box img,
.stack-box img {
  transition: 0.4s ease;
}

.feature-box:hover img,
.stack-box:hover img {
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px) {
  .feature-box img {
    height: 380px;
  }

  .stack-box img {
    height: 220px;
  }
}

@media (max-width: 576px) {
  .feature-box img {
    height: 280px;
  }

  .stack-box img {
    height: 180px;
  }
}


.inner-1 {
    padding-top: 0px !important;
    padding-bottom: 60px;
}


@media (max-width: 576px) {

  /* SAME HEIGHT FOR ALL IMAGES */
  .feature-box img,
  .stack-box img {
    height: 350px;   /* 👈 same height for all */
    width: 100%;
    object-fit: cover;
  }

}
@media (max-width: 576px) {

  .card-img img {
    height: 350px;   /* 👈 same height for all cards */
    width: 100%;
    object-fit: cover;
  }

}


/* =========================
   TABLET (SAME SIZE ALL)
========================= */
@media (max-width: 991px) {

  .feature-box img,
  .stack-box img {
    height: 300px !important;   /* 👈 same size for all */
    width: 100%;
    object-fit: cover;
  }
}



/*services*/
.row .col-lg-4:nth-child(7) {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
/* Make all columns stretch equally */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Ensure full height behavior */
.icon-bx-wraper.about-bx {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Equal height card box */
.icon-bx-wraper.about-bx {
  padding: 25px;
  border-radius: 10px;
  transition: 0.3s ease;
}

/* Content spacing fix */
.icon-content {
  flex: 1;
}

/* Optional: better alignment */
.icon-bx-sm {
  margin-bottom: 15px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    
    .video-bx .text-center {
  
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .video-bx .btn {
    
        align-items: center;
        justify-content: center;
        gap: 8px; /* icon + text space */
        text-align: center;
    }

    .video-bx .fa-whatsapp {
        margin-right: 6px; /* extra safety spacing */
    }
}
@media (max-width: 768px) {
    .video-bx .btn {
  
        margin-bottom: 12px;
    }

    .video-bx .btn:last-child {
        margin-bottom: 14px;
    }
      .content-inner {
    padding-top: 10px !important;
    padding-bottom: 60px !important;
}
}

.content-inner {
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (max-width: 767px) {
  .content-inner {
    padding-top: 0px;
    padding-bottom: 60px;
}
}