/* .Details {
  margin: 100px 0;
  .SectionWrap {
    display: flex;
    align-items: start;
    gap: 24px;
    flex-flow: row wrap;
    .content {
      width: calc(70% - 12px);
      ul {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-flow: row wrap;
        margin-bottom: 15px;
        li {
          width: calc(33.33% - 16px);
          display: flex;
          align-items: center;
          gap: 12px;
          background-color: var(--white-color);
          padding: 15px;
          border-radius: 16px;
          border: 1px solid #eee;
          h6 {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
          }
          p {
            font-size: 13px;
            font-weight: 500;
            opacity: 0.5;
            margin: 0;
          }
          i {
            color: var(--primary-color);
            font-size: 20px;
            background-color: #ffdfe4;
            padding: 12px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 20px 0;
      }
      h2 {
        font-size: 30px;
      }
      p + p {
        margin-top: 15px;
        font-size: 16px;
      }
      .ImgWrap {
        margin: 30px 0;
        display: flex;
        align-items: center;
        gap: 24px;
        flex-flow: row wrap;
        img {
          border-radius: 16px;
        }
        .LeftColumn {
          width: calc(50% - 12px);
        }
        .RightColumn {
          width: calc(50% - 12px);
          display: flex;
          flex-direction: column;
          gap: 17px;
        }
      }
      .Accourdian {
        .Item {
          margin: 15px 0;
          padding: 25px;
          border-radius: 16px;
          border: 1px solid var(--primary-color);
          transition: 0.3s ease;

          .Question {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            justify-content: space-between;
            margin-bottom: 0;

            .Flex {
              display: flex;
              align-items: center;
              gap: 14px;

              h4 {
                margin: 0;
                font-size: 20px;
              }

              span {
                width: 35px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;
                color: #000;
                border-radius: 50%;
                font-weight: 600;
                transition: 0.3s ease;
                border: 1px solid var(--primary-color);
              }
            }

            i {
              background-color: #eee;
              color: #000;
              border-radius: 50%;
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              transition: 0.3s ease;
            }
          }

          .Answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            margin-top: 0;

            p {
              margin-top: 15px;
            }
          }
          &.active {
            .Question {
              margin-bottom: 10px;
            }

            .Flex span {
              background-color: var(--primary-color);
              color: #fff;
            }

            i {
              background-color: var(--primary-color);
              color: #fff;
              transform: rotate(180deg);
            }

            .Answer {
              max-height: 200px;
            }
          }
        }
      }
    }
    .Form {
      width: calc(30% - 12px);
      position: static;
      height:;
      top: 10px;
      .RequestFormWrap {
        border: 2px solid var(--primary-color);
        border-radius: 20px;
        padding: 32px;
        background: #ffedef;

        h3 {
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 5px;
        }

        p {
          font-size: 16px;
          color: #777;
          margin-bottom: 20px;
        }

        .FormGroup {
          margin-bottom: 18px;

          label {
            font-size: 15px;
            color: #666;
            display: block;
            margin-bottom: 6px;
          }

          input {
            width: 100%;
            height: 52px;
            border-radius: 12px;
            border: 1px solid #ddd;
            padding: 0 14px;
            font-size: 14px;
            outline: none;

            &::placeholder {
              color: #aaa;
            }
          }

          .InputIcon {
            position: relative;

            input {
              padding-right: 40px;
            }

            i {
              position: absolute;
              right: 12px;
              top: 50%;
              transform: translateY(-50%);
              color: #888;
              font-size: 14px;
            }
          }
        }

        .Primary_btn {
          width: 100%;
          margin-top: 10px;
          background: linear-gradient(90deg, #d81b60, #e53935);
          color: #fff;
          border: none;
          height: 48px;
          border-radius: 50px;
          font-weight: 600;
          cursor: pointer;
          transition: 0.3s;
          justify-content: center;
          text-align: center;

          &:hover {
            opacity: 0.9;
          }
        }
      }

      .HelpBox {
        margin-top: 20px;
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        border: 1px solid #dcdcdc;
        align-items: flex-start;
        gap: 15px;

        .Icon {
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            color: #e53935;
            font-size: 30px;
          }
        }

        .Content {
          h4 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
          }

          p {
            font-size: 15px;
            color: #777;
            margin: 5px 0;
            opacity: 0.8;
          }

          a {
            font-size: 14px;
            font-weight: 600;
            color: #000;
            text-decoration: none;
            text-decoration: underline;
          }
        }
      }
    }
  }
} */

.Details {
  margin: 100px 0;
  @media (max-width: 991px) {
    margin: 50px 0;
  }
  .SectionWrap {
    display: flex;
    align-items: start;
    gap: 24px;
    flex-flow: row wrap;

    @media (max-width: 991px) {
      flex-direction: column;
    }

    .content {
      width: calc(70% - 12px);

      @media (max-width: 991px) {
        width: 100%;
      }

      .Facilities {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-flow: row wrap;
        margin-bottom: 15px;

        @media (max-width: 768px) {
          gap: 16px;
        }

        li {
          width: calc(33.33% - 16px);
          display: flex;
          align-items: center;
          gap: 12px;
          background-color: var(--white-color);
          padding: 15px;
          border-radius: 16px;
          border: 1px solid #eee;

          @media (max-width: 991px) {
            width: calc(50% - 12px);
          }

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

          h6 {
            font-size: 16px;
            font-weight: 600;
            margin: 0;

            @media (max-width: 576px) {
              font-size: 15px;
            }
          }

          p {
            font-size: 13px;
            font-weight: 500;
            opacity: 0.5;
            margin: 0;
          }

          i {
            color: var(--primary-color);
            font-size: 20px;
            background-color: #ffdfe4;
            padding: 12px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 20px 0;
      }

      h2 {
        font-size: 30px;

        @media (max-width: 768px) {
          font-size: 24px;
        }
      }

      p + p {
        margin-top: 15px;
        font-size: 16px;

        @media (max-width: 576px) {
          font-size: 14px;
        }
      }

      /* .ImgWrap {
        margin: 30px 0;
        display: flex;
        align-items: center;
        gap: 24px;
        flex-flow: row wrap;

        @media (max-width: 768px) {
          gap: 16px;
        }

        img {
          border-radius: 16px;
        }

        .LeftColumn {
          width: calc(50% - 12px);

          @media (max-width: 768px) {
            width: 100%;
          }
        }

        .RightColumn {
          width: calc(50% - 12px);
          display: flex;
          flex-direction: column;
          gap: 17px;

          @media (max-width: 768px) {
            width: 100%;
          }
        }
      } */
       .ImgWrap {
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.ImgWrap img {
  width: 100%;
  border-radius: 16px;
}

/* 1 IMAGE */
.ImgWrap.layout-1 .single {
  width: 100%;
}

/* 2 IMAGES */
.ImgWrap.layout-2 .two-col {
  width: calc(50% - 12px);
}

/* 3 IMAGES (your current layout) */
.ImgWrap.layout-3 .LeftColumn {
  width: calc(50% - 12px);
}

.ImgWrap.layout-3 .RightColumn {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  gap: 17px;
}

/* 4 IMAGES */
/* .ImgWrap.layout-4 .four-col {
  width: calc(25% - 18px);
} */
 /* .ImgWrap.layout-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
} */
 .ImgWrap.layout-4 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr); /* 🔥 THIS IS THE FIX */
  gap: 24px;
}

.ImgWrap.layout-4 .four-col img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* 🔥 perfect square */
  object-fit: cover;
}

.ImgWrap.layout-4 .four-col {
  width: 100%;
}

/* MOBILE */
@media (max-width: 768px) {
  .ImgWrap .two-col,
  .ImgWrap .four-col,
  .ImgWrap .LeftColumn,
  .ImgWrap .RightColumn {
    width: 100%;
  }
}

      .Accourdian {
        .Item {
          margin: 15px 0;
          padding: 25px;
          border-radius: 16px;
          border: 1px solid var(--primary-color);
          transition: 0.3s ease;

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

          .Question {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            justify-content: space-between;
            margin-bottom: 0;

            .Flex {
              display: flex;
              align-items: center;
              gap: 14px;

              h4 {
                margin: 0;
                font-size: 20px;

                @media (max-width: 576px) {
                  font-size: 16px;
                }
              }

              span {
                width: 35px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;
                color: #000;
                border-radius: 50%;
                font-weight: 600;
                transition: 0.3s ease;
                border: 1px solid var(--primary-color);
              }
            }

            i {
              background-color: #eee;
              color: #000;
              border-radius: 50%;
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              transition: 0.3s ease;
            }
          }

          .Answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            margin-top: 0;

            p {
              margin-top: 15px;
            }
          }

          &.active {
            .Question {
              margin-bottom: 10px;
            }

            .Flex span {
              background-color: var(--primary-color);
              color: #fff;
            }

            i {
              background-color: var(--primary-color);
              color: #fff;
              transform: rotate(180deg);
            }

            .Answer {
              max-height: 200px;
            }
          }
        }
      }
    }

    .Form {
      width: calc(30% - 12px);
      position: static;
      top: 10px;

      @media (max-width: 991px) {
        width: 100%;
      }

      .RequestFormWrap {
        border: 2px solid var(--primary-color);
        border-radius: 20px;
        padding: 32px;
        background: #ffedef;

        h3 {
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 5px;
        }

        p {
          font-size: 16px;
          color: #777;
          margin-bottom: 20px;
        }

        .FormGroup {
          margin-bottom: 18px;

          label {
            font-size: 15px;
            color: #666;
            display: block;
            margin-bottom: 6px;
          }

          input {
            width: 100%;
            height: 52px;
            border-radius: 12px;
            border: 1px solid #ddd;
            padding: 0 14px;
            font-size: 14px;
            outline: none;

            &::placeholder {
              color: #aaa;
            }
          }

          .InputIcon {
            position: relative;

            input {
              padding-right: 40px;
            }

            i {
              position: absolute;
              right: 12px;
              top: 50%;
              transform: translateY(-50%);
              color: #888;
              font-size: 14px;
            }
          }
        }

        .Primary_btn {
          width: 100%;
          margin-top: 10px;
          background: linear-gradient(90deg, #d81b60, #e53935);
          color: #fff;
          border: none;
          height: 48px;
          border-radius: 50px;
          font-weight: 600;
          cursor: pointer;
          transition: 0.3s;
          justify-content: center;
          text-align: center;

          &:hover {
            opacity: 0.9;
          }
        }
      }

      .HelpBox {
        margin-top: 20px;
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        display: flex;
        border: 1px solid #dcdcdc;
        align-items: flex-start;
        gap: 15px;

        .Icon {
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            color: #e53935;
            font-size: 30px;
          }
        }

        .Content {
          h4 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
          }

          p {
            font-size: 15px;
            color: #777;
            margin: 5px 0;
            opacity: 0.8;
          }

          a {
            font-size: 14px;
            font-weight: 600;
            color: #000;
            text-decoration: none;
            text-decoration: underline;
          }
        }
      }
    }
  }
}
.IncludeExclude {
  padding-top: 40px;

  @media (max-width: 768px) {
    padding-top: 30px;
  }

  .Wrap {
    display: flex;
    gap: 40px;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 30px;
    }
  }

  .Box {
    width: 50%;

    @media (max-width: 768px) {
      width: 100%;
    }

    .Title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;

      i {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }

      h3 {
        font-size: 22px;
        font-weight: 600;

        @media (max-width: 576px) {
          font-size: 18px;
        }
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: 12px;

      li {
        font-size: 16px;
        color: #555;
        position: relative;
        padding-left: 18px;

        @media (max-width: 576px) {
          font-size: 14px;
        }

        &::before {
          content: "";
          width: 6px;
          height: 6px;
          background: #999;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 9px;
        }
      }
    }
  }

  /* Included Style */
  .Included {
    .Title {
      i {
        background: #e6f6ec;
        color: #22c55e;
      }

      h3 {
        color: #22c55e;
      }
    }
  }

  /* Excluded Style */
  .Excluded {
    .Title {
      i {
        background: #fde8ea;
        color: #e11d48;
      }

      h3 {
        color: #e11d48;
      }
    }
  }
}