.my-home a,
.my-home span,
.my-home h2,
.my-home h5 {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

:root {
  /**
  @font family declaration
  */
  --bd-ff-inter: "Inter", sans-serif;
  --bd-ff-dm-sans: "DM Sans", sans-serif;
  --bd-ff-kanit-sans: "Kanit", sans-serif;
  --bd-ff-jakarta-sans: "Plus Jakarta Sans", sans-serif;
  --bd-ff-epilogue-sans: "Epilogue", sans-serif;
  --bd-ff-outfit-sans: "Outfit", sans-serif;
  --bd-ff-bebas-sans: "Bebas Neue", sans-serif;
  --bd-ff-grotesk-sans: "Space Grotesk", serif;
  --bd-ff-poppins-sans: "Poppins", serif;
  --bd-ff-playfair-sans: "Playfair Display", serif;
  --bd-ff-fontawesome: "Font Awesome 6 Pro";
  --bd-ff-icomoon: "icomoon";
  /**
  @color declaration
  */
  --bd-white: #FFFFFF;
  --bd-black: #121212;
  --bd-placeholder: #828282;
  --bd-selection: #262626;
  --bd-gray: #EDEDED;
  --bd-heading: #121212;
  --bd-primary: #397d49;
  --bd-secondary: #397d49;
  --bd-tertiary: #D90A2C;
  --bd-orange: #FD6535;
  --bd-text-body: #555555;
  --bd-text-secondary: #DDDDDD;
  --bd-bg-secondary: #FFECE3;
  --bd-border-primary: #ECECEC;
  --bd-border-secondary: rgba(220, 220, 220, 1);
  --bd-border-tertiary: rgb(75, 78, 82);
  /**
  @font weight declaration
  */
  --bd-fw-normal: normal;
  --bd-fw-thin: 100;
  --bd-fw-elight: 200;
  --bd-fw-light: 300;
  --bd-fw-regular: 400;
  --bd-fw-medium: 500;
  --bd-fw-sbold: 600;
  --bd-fw-bold: 700;
  --bd-fw-ebold: 800;
  --bd-fw-black: 900;
  /**
  @font size declaration
  */
  --bd-fs-body: 16px;
  --bd-fs-p: 16px;
  --bd-fs-h1: 64px;
  --bd-fs-h2: 48px;
  --bd-fs-h3: 40px;
  --bd-fs-h4: 32px;
  --bd-fs-h5: 24px;
  --bd-fs-h6: 20px;
  --bd-fs-b1: 14px;
  --bd-fs-b2: 16px;
  --bd-fs-b3: 18px;
}

/*----------------------------------------*/
/*  1.1 Animation css
/*----------------------------------------*/
@keyframes topToBottom {
  0% {
    top: -30%;
  }
  100% {
    top: 100%;
  }
}


*::-moz-selection {
  background: var(--bd-black);
  color: var(--bd-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--bd-black);
  color: var(--bd-white);
  text-shadow: none;
}

::selection {
  background: var(--bd-black);
  color: var(--bd-white);
  text-shadow: none;
}

*::-moz-placeholder {
  opacity: 1;
  font-size: 16px;
  color: var(--bd-body-secondary);
}

.my-home .container {
  --bs-gutter-x: 25px;
    max-width: 1300px;
}

@media (max-width: 575px) {
    .my-home   .container {
    --bs-gutter-x: 40px;
  }
}

@media (min-width: 1441px) {
    .my-home .container {
    max-width: 1320px;
  }
}

.my-home .row {
  --bs-gutter-x: 30px;
}

.my-home .gy-30 {
  --bs-gutter-y: 30px;
}

.my-home .gy-40 {
  --bs-gutter-y: 40px;
}

.my-home .gx-50 {
  --bs-gutter-x: 50px;
}
@media (max-width: 575px) {
    .my-home .gx-50 {
    --bs-gutter-x: 30px !important;
  }
}
@media only screen and (min-width: 576px) {
    .my-home .gx-50 {
    --bs-gutter-x: 30px !important;
  }
}
@media only screen and (min-width: 1200px) {
    .my-home .gx-50 {
    --bs-gutter-x: 50px ;
  }
}

.my-home .section-space {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  @media only screen and (min-width: 992px) {
    .my-home .section-space {
      padding-top: 100px;
      padding-bottom: 100px;
    }
  }
  @media only screen and (min-width: 1200px) {
    .my-home .section-space {
      padding-top: 50px;
      padding-bottom: 80px;
    }
  }

  


.my-home h2,
.my-home h5 {
  font-family: var(--bd-ff-dm-sans);
    color: #ffffff;
  margin-top: 0px;
  line-height: 1.1;
  margin-bottom: 0;
  font-weight: var(--bd-fw-sbold);
  word-break: break-word;
}

.my-home h2 {
  font-size: var(--bd-fs-h2);
}

.my-home h5 {
  font-size: var(--bd-fs-h5);
}


.my-home .sub-title-two {
  font: 400 16px var(--bd-ff-kanit-sans);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
  letter-spacing: 5%;
}

.my-home .section-title-two {
  font: 700 26px/1.27 var(--bd-ff-jakarta-sans);
}
@media only screen and (min-width: 576px) {
    .my-home .section-title-two {
    font-size: 30px;
  }
}
@media only screen and (min-width: 992px) {
    .my-home .section-title-two {
    font-size: 46px;
    line-height: 1.15;
  }
}
@media only screen and (min-width: 1400px) {
    .my-home .section-title-two {
    font-size: 55px;
  }
}
.my-home .section-title-two span {
  color: #707070;
}



.my-home .blog-btn-two a {
  font: 400 14px var(--bd-ff-kanit-sans);
  display: inline-block;
  padding: 9px 22px;
 color: #ffffff;
  border: 1px solid var(--bd-text-secondary);
  border-radius: 20px;
}
@media (max-width: 575px) {
    .my-home .blog-btn-two a {
    padding: 6px 14px;
  }
}
@media only screen and (min-width: 768px) {
    .my-home  .blog-btn-two a {
    padding: 6px 14px;
  }
}
@media only screen and (min-width: 992px) {
    .my-home .blog-btn-two a {
    padding: 9px 22px;
  }
}
.my-home  .blog-btn-two a:hover {
  background-color: var(--bd-primary);
  border-color: var(--bd-primary);
  color: #fff;
}

/*----------------------------------------*/
/*  8.4 brand css
/*----------------------------------------*/

/*----------------------------------------*/
/*  8.5 Capabilities css
/*----------------------------------------*/

.my-home .capabilities-two-left {
  max-width: 500px;
}
@media only screen and (min-width: 768px) {
    .my-home  .capabilities-two-left {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
    .my-home .capabilities-two-left {
    max-width: 500px;
  }
}

.my-home .capabilities-single-iteam {
  padding: 0px 30px;
  position: relative;
  overflow: hidden;
}
.my-home .capabilities-single-iteam:hover::before {
  animation-play-state: paused;
}
@media only screen and (min-width: 576px) {
    .my-home .capabilities-single-iteam {
    padding: 0px 0px 0px 20px;
  }
}
@media only screen and (min-width: 768px) {
    .my-home .capabilities-single-iteam {
    padding: 0px 30px;
  }
}
@media only screen and (min-width: 992px) {
    .my-home .capabilities-single-iteam {
    padding: 0px 0px 0px 20px;
  }
}
@media only screen and (min-width: 1400px) {
    .my-home .capabilities-single-iteam {
    padding: 0px 30px;
  }
}
.my-home .capabilities-single-iteam::before {
  content: "";
  position: absolute;
  left: 1.1px;
  top: 45px;
  width: 2px;
  height: 45px;
 background-color: #00b30f;
  animation: topToBottom 5s linear infinite;
  z-index: 2;
}
.my-home .capabilities-single-iteam::after {
  content: "";
  position: absolute;
  left: 1.1px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #E5E5E5;
}
.my-home .capabilities-single-iteam h5 {
  font: 700 20px var(--bd-ff-jakarta-sans);
  margin-bottom: 10px;
  max-width: inherit;
}
@media (max-width: 575px) {
    .my-home .capabilities-single-iteam h5 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 576px) {
    .my-home .capabilities-single-iteam h5 {
    max-width: 200px;
  }
}
@media only screen and (min-width: 768px) {
    .my-home .capabilities-single-iteam h5 {
    max-width: 100%;
  }
}
@media only screen and (min-width: 992px) {
    .my-home .capabilities-single-iteam h5 {
    max-width: 200px;
  }
}
.my-home .capabilities-single-iteam span {
  font-size: 16px;
       color: #00b30f;
  font-family: var(--bd-ff-kanit-sans);
  margin-bottom: 10px;
  display: inline-block;
}





















































        :root {
            --pbmit-secondary-color: #ff6b35;
            --pbmit-blackish-color: #222;
            --pbmit-light-color: #f8f9fa;
            --pbmit-white-color: #ffffff;
            --pbmit-global-color: #007bff;
            --pbmit-heading-typography-font-family: 'Arial', sans-serif;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .container-fluid {
            max-width: 100%;
            padding: 0;
        }

       

        .pbmit-svg-btn svg {
            height: 10px;
            margin-top: -2px;
            margin-left: 8px;
        }

        .pbmit-svg-btn svg line {
            fill: none;
            stroke: var(--pbmit-secondary-color);
            stroke-width: 2;
            stroke-miterlimit: 10;
        }

        .pbmit-svg-btn svg line:nth-child(1) {
            stroke-dasharray: 25px;
            stroke-dashoffset: 50px;
            transition: stroke-dashoffset 0.5s cubic-bezier(.61,1,.88,1);
        }

        .pbmit-svg-btn svg line:nth-child(2),
        .pbmit-svg-btn svg line:nth-child(3) {
            stroke-dasharray: 20px;
            stroke-dashoffset: 40px;
            transition: stroke-dashoffset 0.6s cubic-bezier(.61,1,.88,1) 0.3s;
        }

        .pbmit-svg-btn:hover svg line,
        .pbmit-service-style-4:hover .pbmit-svg-btn a svg line {
            stroke-dashoffset: 0;
            stroke: var(--pbmit-blackish-color);
        }

        .pbmit-svg-btn a {
            font-weight: 600;
            font-size: 12px;
            line-height: 24px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-style: normal;
            font-family: var(--pbmit-heading-typography-font-family);
        }

        .pbmit-link {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .pbmit-service-style-4 {
            position: relative;
            flex: 1;
            height: 100%;
            transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
            padding: 0;
            height: 440px;
            opacity: 0.8;
            /* Default flex when not active - takes equal small space */
            flex: 0.5;
        }

        .pbmit-service-style-4.pbmit-active {
            opacity: 1;
            z-index: 2;
            /* Active column takes 80% of available space */
            flex: 2;
        }

        .pbmit-service-style-4 .pbminfotech-box-content {
            position: absolute;
            top: auto;
            left: 0;
            bottom: 0;
            padding: 40px;
            text-align: left;
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            transition: all 0.5s ease-in-out;
            transform: translateY(0);
            opacity: 1;
        }

        .pbmit-service-style-4.pbmit-active .pbminfotech-box-content {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.3s;
        }

        .pbmit-service-style-4:not(.pbmit-active) .pbminfotech-box-content {
            padding-left: 20px;
            padding-right: 20px;
            transition: all 0.5s ease-in-out;
        }

        .pbmit-service-style-4 .pbmit-content-inner {
            display: flex;
            align-items: center;
            transform: translateX(0);
            opacity: 1;
            transition: all 0.6s ease-in-out;
        }

        .pbmit-service-style-4.pbmit-active .pbmit-content-inner {
            transform: translateX(0);
            opacity: 1;
            transition-delay: 0.4s;
        }

        .pbmit-service-style-4 .pbmit-serv-cat {
   font-weight: 500;
    font-family: var(--pbmit-heading-typography-font-family);
    font-size: 26px;
color: #00b30f;
        }

        .pbmit-service-style-4 .pbmit-serv-cat a {
            position: relative;
            padding-left: 15px;
            color: var(--pbmit-light-color);
        }

        .pbmit-service-style-4 .pbmit-serv-cat a::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 7px;
            height: 7px;
            border-radius: 50px;
            background-color: var(--pbmit-light-color);
            transform: translateX(0%) translateY(-50%);
        }

        .pbmit-service-style-4 .pbmit-service-title {
            font-size: 16px;
            line-height: 22px;
            transition: all 0.5s ease-in-out;
            margin: 0;
            z-index: 1;
            width: 500px;
            color: var(--pbmit-white-color);
            transform: translateY(20px);
            opacity: 0;
        }

        .pbmit-service-style-4.pbmit-active .pbmit-service-title {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.5s;
        }

        .pbmit-service-style-4 .pbmit-service-title a {
            color: var(--pbmit-white-color);
        }

        .pbmit-service-style-4 .pbmit-cat-wrap {
            opacity: 0;
            transition: all 0.5s ease-in-out;
            transform: translateY(30px);
        }

        .pbmit-service-style-4.pbmit-active .pbmit-cat-wrap {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.6s;
        }

        .pbmit-service-style-4 .pbmit-service-img-wrapper {
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            transition: all 0.5s ease-in-out;
            z-index: 0;
            position: absolute;
            background-position: center center;
            background-size: cover;
            object-fit: cover;
        }

        .pbmit-service-style-4 .pbmit-service-img-wrapper::after {
            position: absolute;
            content: "";
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(5, 46, 38,0.7) 0%, rgba(5, 46, 38,0.7) 5%, rgba(5, 46, 38, 0) 59%, rgba(5, 46, 38,0) 100%);
            transition: all 0.5s ease-in-out;
        }

        .pbmit-service-style-4.pbmit-active .pbmit-service-img-wrapper::after {
            background: linear-gradient(to top, rgba(5, 46, 38,0.9) 0%, rgba(5, 46, 38,0.5) 50%, rgba(5, 46, 38,0.3) 100%);
        }

        .pbmit-service-style-4 .pbminfotech-box-number {
            font-size: 80px;
            line-height: 80px;
            display: inline-block;
            position: relative;
            padding-right: 20px;
            z-index: 0;
            font-weight: 600;
            color: var(--pbmit-white-color);
            font-family: var(--pbmit-heading-typography-font-family);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .pbmit-service-style-4:not(.pbmit-active) .pbminfotech-box-number {
            transform: rotate(-90deg);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .pbmit-service-style-4.pbmit-active .pbminfotech-box-number {
            transform: rotate(0deg) scale(1.1);
            transition-delay: 0.2s;
        }

        .pbmit-service-style-4 .pbmit-svg-btn a {
            padding: 0;
            background-color: transparent;
        }

        .pbmit-service-style-4 .pbmit-svg-btn {
            opacity: 0;
            transition: all 0.9s ease-in-out;
            transform: translateX(30px);
        }

        .pbmit-service-style-4.pbmit-active .pbmit-svg-btn {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.7s;
        }

        .pbmit-service-style-4 .pbmit-svg-btn a svg {
            height: 30px !important;
            width: 30px !important;
        }

        .pbmit-service-style-4 .pbmit-svg-btn a svg line, 
        .pbmit-service-style-4:hover .pbmit-svg-btn a svg line {
            stroke: var(--pbmit-white-color);
        }

        .pbmit-service-style-4 .pbmit-featured-wrapper {
            display: none;
        }

        .pbmit-svg-btn a {
            padding: 10px 30px;
            border-radius: 50px;
            color: var(--pbmit-white-color);
            background: var(--pbmit-global-color);
            transition: all .25s ease-in-out;
        }

        /* Enhanced hover effects */
        .pbmit-service-style-4:hover {
            filter: brightness(1.1);
        }

        .pbmit-service-style-4.pbmit-active:hover {
            transform: scale(1.05);
        }

        /* Background colors for demo */
        .pbmit-service-style-4:nth-child(1) .pbmit-service-img-wrapper {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .pbmit-service-style-4:nth-child(2) .pbmit-service-img-wrapper {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .pbmit-service-style-4:nth-child(3) .pbmit-service-img-wrapper {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .pbmit-service-style-4:nth-child(4) .pbmit-service-img-wrapper {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        .pbmit-service-style-4:nth-child(5) .pbmit-service-img-wrapper {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .pbmit-element-service-style-4 {
            background-color: #ffffff;
        }




