.mini-icon-img
     {
         width:20px !important;
     }
     .second-box
     {
         margin-top:-60px;
     }
     .scrollingDiv {
       width: 80%;
       height: 150vh;
       position: absolute;
       overflow: hidden;
       top: 0;
       right: 0;
       z-index: -1;
       transform: rotate(3deg) translateY(-40px);
     }

     .scrolling-section {
       display: flex;
       justify-content: space-between;
       gap: 00px;
       width: 100%;
       height: 100%;
     }

     .scroll-column {
       width: 50%;
       height: 100vh;
       position: relative;
     }

     .scrollImage {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }

     .box {
       width: 100%;
       height: 317px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 27px;
       border-radius: 24px;
       overflow: hidden;
     }

     .box-mobile {
       width: 100%;
       min-height: 200px;
       max-height: 201px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 16px;
       border-radius: 24px;
       overflow: hidden;
       position: relative;
     }

     .iconDiv-mobile {
       padding: 16px;
       display: flex;
       flex-direction: column;
       align-items: center;
       border-radius: 24px;
       height: 100%;
       justify-content: center;
       width: 100%;
     }

     .scroll-column-mobile {
       height: 500px;
       overflow: hidden;
       width: 48%;
     }

     .scrolling-content-mobile {
       height: 200%;
       animation: scroll-up 15s linear infinite;
       display: flex;
       flex-direction: column;
     }

     .alternative-Direction-mobile .scrolling-content-mobile {
       animation: scroll-down 13s linear infinite;
     }

     .scrolling-content {
       width: 85%;
       position: absolute;
       top: 0;
       left: 0;
       animation: scrollUp 10s linear infinite;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }

     .scrolling-content.alternative {
       position: absolute;
       top: 0;
       left: 0;
       animation: scroll-down 10s linear infinite;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }

     /*Home banner cards*/
     /* Text Slider Container */
     .text-slider {
       width: 100%;
       overflow: hidden;
       background: linear-gradient(90deg, #000, #0d6efd);
       padding: 20px 0;
     }

     .bg-lightg {
       background-color: #f6f6f6 !important;
     }

     .work_img {
       width: 40px !important;
     }

     .shadow-text {
       font-size: 3rem;
       font-weight: bold;
       text-shadow: 3px 3px 5px #1260feb8, -3px -3px 5px #0dcaf0cf;
     }

     /* Sliding Content */
     .slider-content {
       display: flex;
       gap: 50px;
       animation: slide 25s linear infinite;
       white-space: nowrap;
     }

     .anchor-bt {
       margin-top: -40px;
     }

     .slider-content span {
       font-size: 20px;
       color: #fff;
       font-weight: bold;
     }

     /* Infinite Slide Animation */
     @keyframes slide {
       from {
         transform: translateX(100%);
       }

       to {
         transform: translateX(-100%);
       }
     }



     /*   text slider css end here*/

     /* Layout utility classes */
     .custom-max-w-5xl {
       max-width: 80rem;
       margin-left: auto;
       margin-right: auto;
     }

     .custom-overflow-hidden {
       overflow: hidden;
     }

     .custom-p-4 {
       padding: 1rem;
     }

     .custom-p-6 {
       padding: 1.5rem;
     }

     .custom-rounded-lg {
       border-radius: 0.5rem;
     }

     .custom-shadow-md {
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
         0 2px 4px -1px rgba(0, 0, 0, 0.06);
     }

     /* Typography */
     .custom-text-lg {
       font-size: 14px;
       line-height: 1.75rem;
       display: -webkit-box;

       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
       /* Adjust based on your layout */
     }

     .custom-text-sm {
       font-size: 0.875rem;
       line-height: 1.25rem;
     }

     .custom-text-gray-700 {
       color: #374151;
     }

     .custom-text-gray-500 {
       color: #6b7280;
     }

     .custom-text-gray-800 {
       color: #1f2937;
     }

     .custom-text-yellow-500 {
       color: #f59e0b;
     }

     .custom-font-medium {
       font-weight: 500;
     }

     .custom-font-bold {
       font-weight: 700;
       font-size: 15px;
       line-height: 0px;
     }

     /* Flexbox utilities */
     .custom-flex {
       display: flex;
     }

     .custom-flex-1 {
       flex: 1 1 0%;
     }

     .custom-flex-col {
       flex-direction: column;
     }

     .custom-flex-row {
       flex-direction: row;
     }

     .custom-items-center {
       align-items: center;
     }

     .custom-gap-6 {
       gap: 1.5rem;
     }

     /* Image styles */
     .custom-w-40 {
       width: 10rem;
     }

     .custom-h-40 {
       height: 10rem;
     }

     .custom-object-cover {
       object-fit: cover;
     }

     /* Border utilities */
     .custom-border {
       border-width: 1px;
       border-color: #e5e7eb;
     }

     /* Cursor utilities */
     .custom-cursor-pointer {
       cursor: pointer;
     }

     /* Carousel-specific styles */
     .custom-carousel {
       display: flex;
       overflow: hidden;
       scroll-behavior: smooth;
       position: relative;
     }

     .custom-carousel-track {
       display: flex;
       transition: transform 0.5s ease-in-out;
     }

     .custom-carousel-item {
       flex: 0 0 100%;
     }

     @media (min-width: 640px) {
       .custom-carousel-item {
         flex: 0 0 50%;
       }

     }

     /* Navigation buttons */
     .custom-carousel-button {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background-color: white;
       color: black;
       padding: 0.44rem 0.51rem;
       border-radius: 50%;
       cursor: pointer;
       border: none;
       z-index: 10;
     }

     .custom-carousel-button:hover {
       background-color: black;
       color: white;
     }

     .custom-carousel-button.custom-left {
       left: 0.2rem;
     }


     .custom-carousel-button.custom-right {
       right: 0.2rem;
     }

     @media (min-width: 640px) {
       .sm\:flex-row {
         flex-direction: row;
       }

     }

     /*swiper slider css*/
     .swiper {
       width: 100%;
       height: 400px;
       margin: 20px auto;
       position: relative;
       overflow: hidden;
     }

     .swiper-slide {
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;

       background-color: transparent;
       border-radius: 20px;
     }

     .swiper-button-next,
     .swiper-button-prev {
       color: #007bff;
     }

     .swiper-pagination-bullet-active {
       background-color: #007bff;
     }

     @media all {
       img {
         height: auto;
         max-width: 100%;
       }




       @media all {
         .swiper {
           margin-left: auto;
           margin-right: auto;
           position: relative;
           overflow: hidden;
           list-style: none;
           padding: 0;
           z-index: 1;
           display: block;
         }

         .swiper-wrapper {
           position: relative;
           width: 100%;
           height: 100%;
           z-index: 1;
           display: flex;
           transition-property: transform;
           transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
           box-sizing: content-box;
         }

         .swiper-wrapper {
           transform: translate3d(0px, 0, 0);
         }

         .swiper-horizontal {
           touch-action: pan-y;
         }

         .swiper-slide {
           flex-shrink: 0;
           width: 100%;
           height: 100%;
           position: relative;
           transition-property: transform;
           display: block;
         }

         .swiper-button-next,
         .swiper-button-prev {
           position: absolute;
           top: var(--swiper-navigation-top-offset, 50%);
           width: calc(var(--swiper-navigation-size)/ 44 * 27);
           height: var(--swiper-navigation-size);
           margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
           z-index: 10;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           color: var(--swiper-navigation-color, var(--swiper-theme-color));
         }

         .swiper-button-prev {
           left: var(--swiper-navigation-sides-offset, 10px);
           right: auto;
         }

         .swiper-button-next {
           right: var(--swiper-navigation-sides-offset, 10px);
           left: auto;
         }

         .swiper-button-next:after,
         .swiper-button-prev:after {
           font-family: swiper-icons;
           font-size: var(--swiper-navigation-size);
           text-transform: none !important;
           letter-spacing: 0;
           font-variant: initial;
           line-height: 1;
         }

         .swiper-button-prev:after {
           content: 'prev';
         }

         .swiper-button-next {
           right: var(--swiper-navigation-sides-offset, 10px);
           left: auto;
         }

         .swiper-button-next:after {
           content: 'next';
         }

         .swiper-pagination {
           position: absolute;
           text-align: center;
           transition: .3s opacity;
           transform: translate3d(0, 0, 0);
           z-index: 10;
         }

         .swiper-pagination-bullets.swiper-pagination-horizontal {
           bottom: var(--swiper-pagination-bottom, 8px);
           top: var(--swiper-pagination-top, auto);
           left: 0;
           width: 100%;
         }

         .swiper-pagination-bullet {
           width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
           height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
           display: inline-block;
           border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
           background: var(--swiper-pagination-bullet-inactive-color, #000);
           opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
         }

         .swiper-pagination-clickable .swiper-pagination-bullet {
           cursor: pointer;
         }

         .swiper-pagination-bullet-active {
           opacity: var(--swiper-pagination-bullet-opacity, 1);
           background: var(--swiper-pagination-color, var(--swiper-theme-color));
         }

         .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
           margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
         }

         .swiper .swiper-notification {
           position: absolute;
           left: 0;
           top: 0;
           pointer-events: none;
           opacity: 0;
           z-index: -1000;
         }
       }

       @media all {


         img,
         span,
         .swiper-button-next,
         .swiper-button-prev,
         .swiper .swiper-button-prev:after,
         .swiper .swiper-button-next:after,
         .portfolio-item.style-1 .arrow-button::before,
         .portfolio-item.style-1 .arrow-button svg path {
           -webkit-transition: all 0.5s ease-in-out 0s;
           -moz-transition: all 0.5s ease-in-out 0s;
           -ms-transition: all 0.5s ease-in-out 0s;
           -o-transition: all 0.5s ease-in-out 0s;
           transition: all 0.5s ease-in-out 0s;
         }
       }

       @media all {
         .portfolio-item.style-1 {
           position: relative;
           margin-bottom: 45px;
           border-radius: 20px;
           overflow: hidden;
         }

         .swiper-slide .portfolio-item.style-1 {
           margin-bottom: 17px;
         }

         .portfolio-item.style-1 img {
           width: 100%;
         }

         .portfolio-item.style-1 .portfolio-image {
           position: relative;
         }

         .portfolio-item.style-1 .portfolio-image::before {
           top: 50%;
           bottom: 50%;
           opacity: 1;
           left: 0;
           z-index: 1;
           content: "";
           right: 0;
           position: absolute;
           pointer-events: none;
           -webkit-transition: all 500ms linear;
           transition: all 500ms linear;
           background: rgba(255, 255, 255, 0.2);
         }

         .portfolio-item.style-1:hover .portfolio-image::before {
           top: 0;
           bottom: 0;
           opacity: 0;
           -webkit-transition: all 500ms linear;
           transition: all 500ms linear;
         }

         .portfolio-item.style-1 .portfolio-desc {
           text-align: center;
           position: absolute;
           bottom: 10px;
           left: 50%;
           transform: translate(-50%, 0%);
           width: 100%;
           z-index: 1;
           padding: 0px 20px;
         }

         .portfolio-item.style-1::before {
           position: absolute;
           content: "";
           width: 100%;
           height: 65%;
           opacity: 0.9;
           -webkit-transition: all 0.25s ease-in-out;
           transition: all 0.25s ease-in-out;
           bottom: 0;
           left: 0;
           border-radius: 20px;
           background: linear-gradient(0deg, #6c757d 0%, #495057 30%, rgba(0, 212, 255, 0) 100%);
           z-index: 1;
         }

         .portfolio-item.style-1 .portfolio-desc-warp {
           margin-bottom: 46px;
         }

         .portfolio-item.style-1 .portfolio-cat a {
           position: relative;
           color: #ffffff;
           letter-spacing: 0.9px;
         }

         .portfolio-item.style-1 .arrow-button span {
           font-weight: 500;
         }

         .portfolio-item.style-1 .arrow-button {
           text-transform: uppercase;
           font-size: 14px;
           letter-spacing: 1px;
           position: relative;
           padding: 15px 43px 18px 25px;
           background-color: #ffffff;
           color: var(--themeht-dark-color);
           border-radius: 15px 15px 0px 0px;
         }

         .portfolio-item.style-1 .arrow-button svg {
           width: 20px;
           height: 20px;
           position: absolute;
           display: block;
         }

         .portfolio-item.style-1 .arrow-button svg path {
           fill: #ffffff;
         }

         .portfolio-item.style-1 .arrow-button .svg-1 {
           bottom: 0px;
           right: -19px;
           transform: rotate(-90deg) scale(1.01);
         }

         .portfolio-item.style-1 .arrow-button .svg-2 {
           bottom: 04px;
           left: -19px;
           transform: rotate(180deg) scale(1.01);
         }

         .portfolio-item.style-1 .portfolio-cat {
           text-transform: uppercase;
           font-size: 14px;
           letter-spacing: 1px;
           margin-bottom: 8px;
           color: #ffffff;
         }

         .portfolio-item.style-1 .portfolio-cat,
         .portfolio-item.style-1 h4 {
           position: relative;
           display: inline-block;
         }

         .portfolio-item.style-1 h4 {
           margin-bottom: 8px;
           font-size: 28px;
           line-height: 38px;
         }

         .portfolio-item.style-1 .portfolio-title h4 a {
           position: relative;
           color: #ffffff;
         }

         .portfolio-item.style-1 .portfolio-title h4 a:hover {
           color: #ffffff;
         }

         .portfolio-item.style-1 .arrow-button .btn-icon-svg {
           top: 28px;

           right: -19px;
           transform: rotate(270deg) scale(1.01);
         }

         svg.btn-icon-svg {
           margin-left: 3px;
         }

         svg.btn-icon-svg line {
           stroke-width: 2;
           stroke-miterlimit: 10;
           stroke-dasharray: 25px;
           stroke-dashoffset: 50px;
           transition: stroke-dashoffset 1s cubic-bezier(.61, 1, .88, 1);
           stroke: var(--themeht-dark-color);
         }

         .arrow-button:hover svg.btn-icon-svg line {
           stroke-dashoffset: 0;
         }

         .arrow-button:hover svg.btn-icon-svg line {
           stroke: var(--themeht-dark-color);
         }


       }

       @media all {
         .portfolio-image {
           overflow: hidden;
         }




         @media (max-width:991px) {
           .portfolio-item.style-1 {
             margin-bottom: 30px;
           }
         }

         @media (max-width:576px) {
           .portfolio-item.style-1 h4 {
             margin-bottom: 6px;
             font-size: 22px;
             line-height: 28px;
           }
         }
       }

       /* Media gallery*/
       .container.gallery {
         width: 100%;
         overflow: hidden;
         position: relative;
         border-radius: 10px;
       }

       .slider-wrapper {
         position: relative;
         display: flex;
         align-items: center;
       }

       .slider {
         display: flex;
         transition: transform 0.5s ease-in-out;
         gap: 10px;
       }

       .slider img {
         width: 100%;
         height: auto;
         object-fit: cover;
         border-radius: 10px;
       }

       .slide {
         flex: 1 0 calc(25% - 10px);
         /* Desktop: 4 images per row */
         max-width: calc(25% - 10px);
       }

       @media (max-width: 1024px) {
         .slide {
           flex: 1 0 calc(33.333% - 10px);
           /* Tablet: 3 images per row */
           max-width: calc(33.333% - 10px);
         }
       }

       @media (max-width: 768px) {
         .slide {
           flex: 1 0 calc(100% - 10px);
           /* Mobile: 1 image per row */
           max-width: calc(100% - 10px);
         }
       }

       /* Navigation Buttons */
       button.prev,
       button.next {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background-color: white;
         color: white;
         border-radius: 50%;
         border: none;
         padding: 5px 5px;
         cursor: pointer;
         font-size: 20px;
         z-index: 10;
       }

       button.prev {
         left: 10px;
       }

       button.next {
         right: 10px;
       }

       button:hover {
         background-color: rgba(0, 0, 0, 0.8);
       }

       .prev:hover svg path,
       .next:hover svg path {
         stroke: white;
       }

       /* cards for banner*/
       .shadow-text {
         font-size: 3rem;
         font-weight: bold;
         text-shadow: 3px 3px 5px #1260feb8, -3px -3px 5px #0dcaf0cf;
         line-height: 80px;
       }

       .btn-slide {
         margin-top: 12px;
         background-color: #0F2A37;
         color: white;
         font-size: 0.875rem;
         font-weight: bold;
         padding: 8px 16px;
         border: none;
         border-radius: 999px;
         cursor: pointer;
       }


       .gap-3 {
         gap: 1rem !important;
       }

       .text-decoration-none {
         text-decoration: none !important;
       }

       .text-reset {
         --bs-text-opacity: 1;
         color: inherit !important;
       }



       ::-webkit-scrollbar {
         width: 12px;
       }



       .gradientHeader {
         font-weight: 900;
         font-size: 60px;
         line-height: 60px;
         background: linear-gradient(140.81deg, #ff5d5d 8%, #c04cad 48.81%, #1857d1 101.59%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
       }

       .MainHeading {
         margin-top: 16vh;
       }

       .MainHeading h1 {
         font-weight: 800;
         font-size: 56px;
         line-height: 71px;
         background: linear-gradient(130.15deg, #002f59 25.69%, #000000 128.49%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
       }

       .MainHeading p {
         font-weight: 400;
         font-size: 16px;
         line-height: 180%;
         color: #2b2a29;
         width: 35%;
         margin-top: 26px;
       }



       .iconDiv {
         padding: 26px;
         display: flex;
         flex-direction: column;
         align-items: center;
         border-radius: 24px;
         height: 100%;
         justify-content: center;
         width: 100%;
       }

       .iconDiv img {
         max-width: 60px;
       }

       .iconDivTitle {
         font-weight: 900;
         font-size: 20px;
         line-height: 120%;
         text-align: center;
         color: #000000;
       }

       .icon-blueDiv {
         background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
       }

       .icon-OrangeDiv {
         background: linear-gradient(180deg, #1260fe 0%, #0dcaf0 100%);
       }

       .icon-greenDiv {
         background: linear-gradient(145.56deg, #e3ffe9 -3.69%, #7bab55 86.61%);
       }

       .headerBtns {
         margin-top: 5vh;
       }

       .PrimaryBtn {
         background: linear-gradient(128.49deg, #de463e -8.23%, #ff8a00 72.36%);
         box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
         border-radius: 12px;
         padding: 15px 26px;
         color: white;
         font-weight: 400;
         font-size: 16px;
         line-height: 22px;
         border: none;
         outline: none;
       }

       .SecondaryBtn {
         background: #1e1e1e;
         border-radius: 12px;
         padding: 15px 26px;
         color: white;
         font-weight: 400;
         font-size: 16px;
         line-height: 22px;
         border: none;
         text-decoration: none;
         outline: none;
         cursor: pointer;
       }

       .Hero {
         height: calc(100vh - 110px);
         overflow: hidden;
       }

       .mobileScrollingDiv {
         display: none;
         position: relative;
       }

       .mobileScrollingDiv::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: 0;
         height: 100px;
         width: 100%;
         background: linear-gradient(183deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
       }


       @media (max-width: 1450px) {
         .MainHeading h1 {
           font-size: 40px;
         }

         .gradientHeader {
           font-size: 52px;
         }

         .mobileScrollingDiv .iconDiv-mobile.icon-OrangeDiv img,
         .mobileScrollingDiv .iconDiv-mobile.icon-greenDiv img {
           max-width: 50px;
         }
       }

       @media (max-width: 1260px) {
         .MainHeading h1 {
           font-size: 36px;
         }

         .gradientHeader {
           font-size: 42px;
         }
       }

       @media (max-width: 821px) {
         .gradientHeader {
           font-size: 50px;
         }

         .MainHeading h1 {
           font-size: 40px;
         }
       }

       @media (max-width: 767px) {
         .headerBtns {
           margin-top: 2vh;
           margin-bottom: 2vh;
         }

         .SecondaryBtn,
         .PrimaryBtn {
           font-size: 13px;
           padding: 15px 26px !important;
         }

         .container {
           padding: 0px 20px !important;
         }

         .MainHeading {
           margin-top: 100px;
         }

         .MainHeading h1 {
           font-size: 28px !important;
           line-height: 40px !important;
           text-align: center;
         }

         .gradientHeader {
           font-size: 28px !important;
           line-height: 33px !important;
           text-align: center;
         }

         .MainHeading p {
           font-size: 14px;
           line-height: 22px;
           text-align: center;
           width: 100%;
         }

         .scrollingDiv {
           width: 100%;
           position: relative;
           overflow: hidden;
           z-index: -1;
           transform: rotate(0deg) scale(1.1);
         }

         .headerBtns {
           margin-top: 30px;
         }

         .headerBtns {
           justify-content: center;
         }
       }

       @media (max-width: 575.9px) {
         .iconDivTitle {
           font-size: 10px;
         }
       }

      

       @media (max-width: 1054px) {
    

         .mobileScrollingDiv {
           display: block;
         }

         .Hero {
           height: 100%;
           display: flex;
           flex-flow: column;
         }

         .MainHeading h1 {
           text-align: center;
         }

         .MainHeading p {
           text-align: center;
           width: 100%;
         }

         .MainHeading {
           display: flex;
           align-items: center;
           flex-direction: column;
           margin-bottom: 20px;
         }
       }

       @media screen and (max-width: 400px) {
         .MainHeading h1 {
           font-size: 20px !important;
         }

         .gradientHeader {
           font-size: 24px !important;
           line-height: 30px !important;
         }
       }


       a {
         text-decoration: none;
       }

       /*! CSS Used keyframes */
       @keyframes scroll-up {
         0% {
           transform: translateY(0);
         }

         100% {
           transform: translateY(-50%);
         }
       }

       @keyframes scroll-down {
         0% {
           transform: translateY(-50%);
         }

         100% {
           transform: translateY(0);
         }
       }

       @keyframes scrollUp {
         0% {
           transform: translateY(0);
         }

         100% {
           transform: translateY(-1585px);
         }
       }


       /*testimonial popup*/
       /* Modal styles */
       .modal {
         position: fixed;
         z-index: 999999;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         /* Black with transparency */
         display: none;
         /* Hidden initially */
         justify-content: center;
         align-items: center;
       }

       .modal-content {
         background-color: #fff;
         padding: 20px;
         border: 1px solid #888;
         width: 80%;
         max-width: 600px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         border-radius: 8px;
         position: relative;
       }
.modal-title
{
    color:white !important;
}
       .close {
         color: #aaa;
         font-size: 28px;
         font-weight: bold;
         position: absolute;
         top: 10px;
         right: 20px;
       }

       .close:hover,
       .close:focus {
         color: black;
         text-decoration: none;
         cursor: pointer;
       }