@import 'pro2-text.css';
@import 'pro2-swiper.css';

.p-container {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

.breadcrumb_header {
  position: relative;
  padding-top: 20%;
  padding-bottom: 3%;
  background-size: cover;
  background-position: left;
}

.clip-top-section {
  background-color: #FAF7F1;
  position: absolute;
  inset: 0px;
}

.clip-bottom-section {
  display: none;
}

.cd-pro2-info-box {
  padding-right: 14px;
  padding-left: 14px;
}


.b-image {
  width: 100%;
  max-width: 660px;
  max-height: 400px;
  aspect-ratio: 1 / 1;
}


@media (min-width: 1440px) {
     .clip-bottom-section {
    display: block;
    inset: 0px;
    position: absolute;
    background-color: #263238;
    clip-path: polygon(10% 85%, 85% 60%, 100% 80%, 100% 100%, 0 90%);
  }
}

@media (min-width: 1024px) {

  .clip-bottom-section {
    display: block;
    inset: 0px;
    position: absolute;
    background-color: #263238;
    clip-path: polygon(0% 85%, 85% 60%, 100% 80%, 100% 100%, 0 90%);
  }

  .clip-top-section {
    inset: 0px;
    position: absolute;
    background-color: #FAF7F1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }

  .cd-pro2-info-box {
    padding-right: 50px;
    padding-left: 50px;
    padding-bottom: 10px;
  }
}

@media (min-width: 1440px) {
  .p-container {
    padding-right: 120px;
    padding-left: 120px;
  }

  .breadcrumb_header{
    padding-top: 16%;
  }

 }

 @media (min-width: 1920px) {

 .clip-bottom-section {
    clip-path: polygon(10% 85%, 85% 60%, 100% 80%, 100% 100%, 0 90%);
 }
}

  /* Pro2 specific layout and utility classes (added so Pro2 page relies only on pro2.css) */

  .pro2-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
  }

  .pro2-col-12 {
    padding-left: 10px;
    padding-right: 10px;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .pro2-col-6 {
    padding-left: 10px;
    padding-right: 10px;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .pro2-col-7 {
    padding-left: 10px;
    padding-right: 10px;
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }

  .pro2-col-5 {
    padding-left: 10px;
    padding-right: 10px;
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }

  .pro2-hero-content {
    display: block;
  }

  .pro2-breadcrumb-content {
    position: relative;
  }

  .pro2-pb-20 { padding-bottom: 20px; }
  .pro2-pb-40 { padding-bottom: 40px; }
  .pro2-pb-80 { padding-bottom: 80px; }
  .pro2-mt-10 { margin-top: 10px; }

  .pro2-hide-sm { display: none; }
  .pro2-display-block { display: block; }

  .pro2-z-1 { position: relative; z-index: 1; }

  .image-size { width: 100%; height: auto; object-fit: cover; }

  /* Button styles copied/adapted from .tp-btn-white-border */
  .pro2-btn-white-border {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: #0B2A50;
    background: #FFFFFF;
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    border-bottom: 3px solid #0B2A50;
    box-shadow: 0px 2px 55px rgba(168, 182, 218, 0.32);
  }

  @media (max-width: 767px) {
    .pro2-btn-white-border {
      height: 47px;
      line-height: 50px;
      padding: 0 20px;
    }
  }

  .pro2-btn-white-border i { padding-left: 17px; }

  .pro2-btn-white-border:hover { color: #FFFFFF; }

  .pro2-btn-white-border:hover i { animation: tfLeftToRight 0.5s forwards; }

  .pro2-btn-white-border::before,
  .pro2-btn-white-border::after {
    content: "";
    background: #0B2A50;
    height: 50%;
    width: 0;
    position: absolute;
    transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: -1;
  }

  .pro2-btn-white-border::before { top: 0; left: 0; right: auto; }
  .pro2-btn-white-border::after { bottom: 0; right: 0; left: auto; }

  .pro2-btn-white-border:hover::before { width: 100%; right: 0; left: auto; }
  .pro2-btn-white-border:hover::after { width: 100%; left: 0; right: auto; }

  .pro2-shape-img { display: block; }

  .pro2-banner-area { padding-top: 68px; padding-bottom: 68px; }
  .pro2-banner-img { display: block; text-align: center; }

  .pro2-project-wrapper { 
     border: 1px solid #ebebf9;
    padding: 30px 0;
    border-radius: 20px;
    display:block; }

  /* Tablet + Mobile: single-column layout (stack items)
     Desktop and up (>=1024px) use multi-column widths */
  @media (min-width: 1024px) {
    .pro2-col-12 { flex: 0 0 100%; max-width: 100%; }
    .pro2-col-6 { flex: 0 0 50%; max-width: 50%; }
    .pro2-col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .pro2-col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  }

  /* Ensure about/info boxes stack one-per-row on mobile and tablet */
  @media (max-width: 1024px) {
    .pro2-row { flex-direction: column; }
    .pro2-col-6,
    .pro2-col-7,
    .pro2-col-5,
    .pro2-col-12 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }

    /* make sure each info box gets its own row and clear spacing */
    .pro2-project-wrapper .cd-pro2-info-box {
      width: 100% !important;
      margin-bottom: 20px;
      box-sizing: border-box;
    }
  }

  @media (min-width: 1024px) {
    .pro2-hide-sm { 
        display: flex;
        justify-content: flex-end;
     }
  }