.service-main {
   margin: 2.5rem auto 2rem auto;
   background: rgba(255, 255, 255, 0.7);
   padding: 2.2rem 1rem 2.5rem 1rem;
   overflow: hidden;
   position: relative;
   backdrop-filter: blur(4px);
 }

 .service-title {
   font-size: 2.4rem;
   text-align: center;
   color: #2646b5;
   letter-spacing: 1.5px;
   font-weight: 700;
   margin-bottom: 0.6rem;
   text-shadow: 0 2px 14px #96a7f777;
 }

 .service-fade {
   margin: 1.1rem auto 2.6rem auto;
   width: 96%;
   padding: 0.75rem 1.2rem;
   background: linear-gradient(94deg, rgba(54, 95, 203, 0.22) 65%, rgba(253, 185, 155, 0.13) 100%);
   border-radius: 22px;
   font-weight: 700;
   color: #3e528f;
   text-align: center;
   font-size: 1.16rem;
   border: 1px solid rgba(44, 60, 155, 0.07);
   letter-spacing: 0.4px;
   backdrop-filter: blur(1.4px);
 }

 .service-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 2.3rem;
   justify-content: center;
   margin-bottom: 2.7rem;
   animation: fadeIn 1.1s cubic-bezier(0.43, 0, 0.3, 1) both;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(34px);
   }

   to {
     opacity: 1;
     transform: none;
   }
 }

 .category-card {
   border-radius: 22px;
   box-shadow: 0 16px 40px rgb(113 127 153);
   min-width: 290px;
   max-width: 330px;
   flex: 1 0 320px;
   padding: 2rem 1.1rem 1rem 1.1rem;
   margin-bottom: 0.4rem;
   position: relative;
   cursor: pointer;
   border: 2.5px solid transparent;
   overflow: hidden;
   z-index: 2;
   opacity: 1;
   transition: transform 0.22s cubic-bezier(0.6, 0.11, 0.45, 1.09), box-shadow 0.22s, border 0.17s;
 }

 .category-card:hover {
   transform: translateY(-11px) scale(1.039);
   box-shadow: 0 16px 44px #c4404045, 0 1px 12px #cd97ff22;
   z-index: 3;
   outline: 2.5px solid #d8132461;
   outline-offset: 2.5px;
 }

 .icon-float-bg {
   background: radial-gradient(circle at 60% 40%, #ffebb4 40%, #ffe167 100%, #ffeab7 112%);
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   margin: 0 auto 0.9rem auto;
   box-shadow: 0 2px 14px #ffd37c62, 0 10px 32px #fffbe53c;
   font-size: 2.5rem;
   border: 2px solid #fdeca3;
   transform: rotate(-11deg);
   animation: floatin 2.2s ease alternate infinite;
   transition: box-shadow 0.3s;
 }

 @keyframes floatin {
   0% {
     transform: rotate(-11deg) scale(1);
   }

   52% {
     transform: rotate(-3deg) scale(1.1);
   }

   100% {
     transform: rotate(-17deg) scale(0.96);
   }
 }

 .category-title {
   font-family: 'Montserrat', Arial, sans-serif;
   font-size: 1.21rem;
   font-weight: 700;
   color: #36416b;
   margin-bottom: 0.8rem;
   letter-spacing: 0.7px;
   text-align: center;
 }

 .category-list {
   list-style: none;
   padding: 0;
   margin: 0 0 0.2rem 0;
   text-align: left;
 }

 .category-list li {
   font-size: 1.08rem;
   color: #2d3d5d;
   margin-bottom: 0.35rem;
   border-left: 3px solid #0B2154;
   padding-left: 0.77rem;
   background: transparent;
   border-radius: 2.5px;
   position: relative;
   transition: border-color 0.14s, color 0.14s;
   cursor: pointer;
 }

 .category-list li:hover {
   color: #0B2154;
   background: #f4f7fe7a;
   border-left: 3px solid #d81324;
 }

 @media (min-width: 800px) {
   .li-tooltip {
     position: absolute;
     left: 50%;
     bottom: 100%;
     transform: translateX(-50%) translateY(-8px);
     background: #0b2154d6;
     color: #fff;
     font-size: 0.97em;
     border-radius: 10px;
     padding: 0.72em 1em;
     z-index: 10;
     min-width: 300px;
     max-width: 320px;
     opacity: 0;
     pointer-events: none;
     white-space: pre-line;
     text-align: left;
     font-family: 'Montserrat', Arial, sans-serif;
     display: block;
     transition: opacity 0.18s cubic-bezier(0.18, 0.8, 0.28, 1), transform 0.23s;
   }

   .category-list li.show-tooltip .li-tooltip {
     opacity: 1;
     pointer-events: auto;
     transform: translateX(-50%) translateY(-18px) scale(1.01);
   }
 }

 @media (max-width: 900px) {
   .service-grid {
     gap: 1.2rem;
   }

   .category-card {
     min-width: 95%;
     max-width: 99%;
   }
 }

 @media (max-width: 600px) {
   .service-title {
     font-size: 1.19rem;
   }

   .service-fade {
     font-size: 0.92rem;
   }

   .category-card {
     min-width: 99%;
     padding: 1.03rem 0.5rem 0.8rem 0.5rem;
   }
 }

 /* Updated to use <button> for info btn and better accessibility */
 .category-info-btn {
   position: absolute;
   top: 15px;
   right: 14px;
   z-index: 10;
   background: #fff5fc;
   padding: 4px 7px;
   border-radius: 50%;
   color: #d81324;
   font-size: 1.6em;
   cursor: pointer;
   transition: background 0.2s;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .category-info-btn:hover,
 .category-info-btn:focus {
   background: #ffd5e5;
   outline: none;
   box-shadow: 0 0 0 3px #d8132461;
 }

 /* Modal Cards internal styling */
 .mini-service-card {
   border-radius: 9px;
   border: 1.5px solid #dbe3fb;
   background: #fafcff;
   padding: 1rem 0.9rem 1rem 0.9rem;
   height: 230px;
   /* fixed height for uniformity */
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
   box-shadow: 0 3px 18px #eef2fa;
   transition: border-color 0.2s;
   cursor: pointer;
   overflow: hidden;
   position: relative;
 }

 .mini-service-card:focus {
   border-color: #2246a5;
   box-shadow: 0 1px 0 #2246a554;
   outline: none;
 }

 .mini-service-card img {
   display: block;
   margin: 0 auto 0.4rem auto;
   border-radius: 6px;
   max-height: 46px;
   max-width: 90%;
   object-fit: contain;
   background: #f4f6fa;
   box-shadow: 0 1px 5px #c5d1f166;
   width: 68px;
   /* Fixed width */
   height: 46px;
   /* Fixed height */
   object-fit: contain;
   /* Prevent stretching or distortion */
   max-width: 100%;
 }

 .mini-service-card .service-name {
   font-weight: 700;
   color: #2548ae;
   font-size: 1.07em;
   margin-bottom: 0.13rem;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .mini-service-card .service-price {
   color: #cb2144;
   font-weight: 600;
   font-size: 0.97em;
   margin-bottom: 0.2rem;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 /* Make the description take available space but clamp lines */
 .mini-service-card .service-desc {
   color: #527fe2;
   font-size: 0.93em;
   text-align: center;
   margin: 0 0 0.5rem 0;
   line-height: 1.35em;
   overflow: hidden;
   flex-grow: 1;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   /* show up to 4 lines of text */
   -webkit-box-orient: vertical;
 }

 .mini-service-card .card-btn {
   margin-top: auto;
   /* push button to bottom */
   background: #e6eafd;
   color: #2548ae;
   border: 0;
   border-radius: 7px;
   padding: 6px 16px;
   font-weight: bold;
   font-size: 0.99em;
   letter-spacing: 0.05em;
   cursor: pointer;
   box-shadow: none;
   transition: background 0.15s, color 0.18s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .mini-service-card .card-btn:active,
 .mini-service-card .card-btn:focus {
   background: #dbe3fb;
   color: #1d367e;
   outline: none;
 }

 @media (max-width: 650px) {
   .mini-service-card {
     height: 240px;
     padding: 1rem 0.7rem 1rem 0.7rem;
   }
 }

 /* testimonials */
 #image-container,
 .position-relative.w-100 {
   height: 24rem;
   perspective: 1000px;
 }

 .testimonial-image {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 1.5rem;
   transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .arrow-button svg {
   width: 1.25rem;
   height: 1.25rem;
   fill: #f1f1f7;
   transition: transform 0.3s;
 }

 .arrow-button:hover {
   background-color: #d81324 !important;
 }

 .arrow-button:hover svg {
   fill: #fff;
 }

 .prev-button:hover svg {
   transform: rotate(-12deg);
 }

 .next-button:hover svg {
   transform: rotate(12deg);
 }

 @media (max-width: 767.98px) {

   #image-container,
   .position-relative.w-100 {
     height: 16rem;
   }
 }

 .border_radius {
   border-radius: 5px !important;
 }

 /* about section */


 ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .carousel-item img {
   max-height: 80vh !important;

 }


 img {
   max-height: 100vh !important;
   max-width: 100%;
   height: auto;
 }

 section {
   padding: 60px 0;
   /* min-height: 100vh;*/
 }

 

 .list-style-one {
   position: relative;
 }

 .list-style-one li {
   position: relative;
   font-size: 16px;
   line-height: 26px;
   color: #222222;
   font-weight: 400;
   padding-left: 35px;
   margin-bottom: 12px;
 }

 .list-style-one li:before {
   content: "\f058";
   position: absolute;
   left: 0;
   top: 0px;
   display: block;
   font-size: 18px;
   padding: 0px;
   color: #ff2222;
   font-weight: 600;
   -moz-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-variant: normal;
   text-rendering: auto;
   line-height: 1.6;
   font-family: "Font Awesome 5 Free";
 }

 .list-style-one li a:hover {
   color: #44bce2;
 }

 .btn-style-one {
   position: relative;
   display: inline-block;
   font-size: 17px;
   line-height: 30px;
   color: #ffffff;
   padding: 10px 30px;
   font-weight: 600;
   overflow: hidden;
   letter-spacing: 0.02em;
   background-color: #d81324;
 }

 .btn-style-one:hover {
   background-color: #d81324;
   color: #ffffff;
 }

 
/* about */

 /* mission &vision */
 .v-m-v-container {
   /* margin: 60px auto; */
   display: flex;
   justify-content: center;
   gap: 46px;
   background: rgba(255, 255, 255, 0.65);
   border-radius: 24px;
   padding: 48px 15px;
 }

 .v-m-v-card {
   background: #fff;
   border-radius: 18px;
   /* box-shadow: 0 4px 18px #b3bdea1a, 0 1px 2px #f8e9ff1a; */
   box-shadow: 0 16px 40px rgb(113 127 153);
   padding: 36px 22px 30px 22px;
   width: 400px;
   text-align: center;
   border: 2.2px solid #0b2154;
   position: relative;
   transition: transform 0.25s, box-shadow 0.25s;
   opacity: 0;
   transform: translateY(60px) scale(0.94);
   animation: v-m-v-fade-in 1s cubic-bezier(0.38, 0.78, 0.58, 1.18) forwards;
 }

 .v-m-v-card:nth-child(2) {
   animation-delay: 0.21s;
 }

 .v-m-v-card:nth-child(3) {
   animation-delay: 0.44s;
 }

 @keyframes v-m-v-fade-in {
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 .v-m-v-card:hover {
   transform: translateY(-13px) scale(1.035);
   /* box-shadow: 0 16px 42px #0f288d28, 0 1px 12px #b8bce533; */
   box-shadow: 0 16px 42px #da404028, 0 1px 12px #0e2441;
   border: 2.2px solid #d81324;
   z-index: 2;
 }

 .v-m-v-icon {
   width: 74px;
   height: 74px;
   margin: 0 auto 18px auto;
   border-radius: 50%;
   box-shadow: 0 2px 20px #bed9fc98;
   font-size: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid #d6e7fd;
   animation: icon-bounce 2s infinite alternate;
 }

 @keyframes icon-bounce {
   0% {
     transform: scale(1) rotate(-8deg);
   }

   60% {
     transform: scale(1.12) rotate(2deg);
   }

   100% {
     transform: scale(0.97) rotate(-11deg);
   }
 }

 .v-m-v-title {
   color: #0b2154;
   font-weight: 700;
   font-size: 1.7rem;
   margin-bottom: 11px;
   letter-spacing: 2px;
   text-transform: uppercase;
   text-shadow: 0 2px 14px #96a7f755;
 }

 .v-m-v-desc {
   color: #234178;
   font-size: 1.04rem;
   margin: 0 0 0 0;
   line-height: 1.56;
   min-height: 54px;
 }

 @media (max-width: 980px) {
   .v-m-v-container {
     flex-direction: column;
     align-items: center;
     gap: 32px;
   }

   .v-m-v-card {
     width: 97%;
   }
 }




 /* car animation */


 /*********************************/
 :root {
   --car-move-distance: calc(80vw - 200px);
 }

 @media (max-width: 1236px) {

   .car img {
     width: 100px;
     height: auto;
   }

   .koleso img {
     width: 20px;
     height: 20px;
   }

   .title {
     font-size: 16px !important;
     padding: 4px;
   }

   .koleso.left {
     position: absolute;
     left: 8px !important;
     bottom: 5px !important;
   }

   .koleso.right {
     position: absolute;
     right: 9px !important;
     bottom: 5px !important;
   }

   :root {
     --car-move-distance: calc(80vw - 100px);
     /* adapt to smaller car */
   }
 }

 @media (max-width: 673px) {

   .car img {
     width: 55px;
     height: auto;
   }

   .koleso img {
     width: 10px;
     height: 10px;
   }

   .title {
     font-size: 9px !important;
     padding: 4px;
   }

   .koleso.left {
     position: absolute;
     left: 5px !important;
     bottom: -3px !important;
   }

   .koleso.right {
     position: absolute;
     right: 6px !important;
     bottom: -3px !important;
   }

   :root {
     --car-move-distance: calc(90vw - 100px);
     /* adapt to smaller car */
   }
 }

 @media (max-width: 425px) {

   .car img {
     width: 55px;
     height: auto;
   }

   .koleso img {
     width: 10px;
     height: 10px;
   }

   .title {
     font-size: 8px !important;
     padding: 4px;
   }

   .koleso.left {
     position: absolute;
     left: 5px !important;
     bottom: -3px !important;
   }

   .koleso.right {
     position: absolute;
     right: 6px !important;
     bottom: -3px !important;
   }

   :root {
     --car-move-distance: calc(98vw - 100px);
     /* adapt to smaller car */
   }
 }

 @media (max-width: 350px) {

   .car img {
     width: 45px;
     height: auto;
   }

   .koleso img {
     width: 9px;
     height: 9px;
   }

   .title {
     font-size: 8px !important;
     padding: 4px;
   }

   .koleso.left {
     position: absolute;
     left: 4px !important;
     bottom: -5px !important;
   }

   .koleso.right {
     position: absolute;
     right: 5px !important;
     bottom: -5px !important;
   }

   :root {
     --car-move-distance: calc(100vw - 85px);
     /* adapt to smaller car */
   }
 }



 .main {
   position: relative;
   overflow: hidden;
 }

 .car-main {
   position: relative;
   display: inline-block;
   transform: scale(1.3);
   margin-top: 15px;
 }

 .koleso.left {
   position: absolute;
   left: 17px;
   bottom: 13px;
 }

 .koleso.right {
   position: absolute;
   right: 19px;
   bottom: 12px;
 }

 .title {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: 0;
   transform: translate(-50%, -50%);
   font-size: 32px;
   color: #D81324;
   padding: 10px;
   white-space: nowrap;
   display: flex;
   gap: 2px;
 }

 .title span {
   opacity: 0;
   transition: opacity 0.15s linear;
 }



 .car {
   animation: carMove 5s linear infinite alternate;
   animation-delay: -0.01s;
 }

 .koleso {
   animation: kolesoMove 5s linear infinite alternate;
   animation-delay: -0.01s;
 }

 @keyframes carMove {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(var(--car-move-distance));
   }
 }

 @keyframes kolesoMove {
   0% {
     transform: translateX(0) rotate(0deg);
   }

   100% {
     transform: translateX(var(--car-move-distance)) rotate(2000deg);
   }
 }

 /* car animation */

 /* about us section animation */
 @media (max-width: 425px) {
   .main-flex-container {
     flex-direction: column;
     align-items: center;
     width: 100vw;
     gap: 0;
   }

   .left-panel,
   .right-panel {
     min-width: unset;
     width: 93vw;
     flex: 1 1 100%;
     padding: 0 0 8px 0;
     justify-content: center;
     align-items: flex-start;
   }

   .animated_container,
   .orbit {
     width: 200px !important;
     height: 200px !important;
     min-width: 0;
     min-height: 0;
     margin: 0 auto;
   }

   .center-circle {
     width: 60px !important;
     height: 60px !important;
     font-size: .92rem !important;
     min-width: 0;
   }

   .service {
     width: 40px !important;
     font-size: 0.65rem !important;
     padding: 3px 0 5px 0 !important;
     border-radius: 8px !important;
   }
 }


 /* Make the orbit container and related elements smaller on small screens */
 @media (max-width: 600px) {

   .animated_container,
   .orbit {
     width: 280px !important;
     height: 280px !important;
   }

   .center-circle {
     width: 95px !important;
     height: 95px !important;
     font-size: 1.07rem !important;
   }

   .service {
     width: 70px !important;
     font-size: .85rem !important;
     padding: 7px 0 9px 0 !important;
     border-radius: 15px !important;
   }
 }

 .main-flex-container {
   display: flex;
   flex-wrap: wrap;
   width: 100vw;
   justify-content: center;
   align-items: flex-start;
   box-sizing: border-box;
   gap: 0;
 }

 .left-panel,
 .right-panel {
   flex: 1 1 420px;
   min-width: 320px;
   display: flex;
   justify-content: center;
   align-items: flex-start;
   padding: 24px 6px;
   box-sizing: border-box;
   background: none;
   border: none;
 }

 .animated_container {
   position: relative;
   width: 520px;
   height: 520px;
   border-radius: 40px;
   backdrop-filter: blur(3px);
 }

 .center-circle {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 190px;
   height: 190px;
   background: #0b2154;
   color: #fff;
   letter-spacing: 2px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.15rem;
   font-weight: bold;
   box-shadow: 0 6px 32px 4px rgba(81, 231, 252, 0.16);
   transform: translate(-50%, -50%);
   z-index: 2;
   border: 4px solid #fff;
   text-shadow: 0 2px 18px rgba(52, 104, 247, 0.17);
 }

 .orbit {
   position: absolute;
   width: 520px;
   height: 520px;
   top: 0;
   left: 0;
   pointer-events: none;
   z-index: 1;
 }

 .service {
   position: absolute;
   width: 150px;
   text-align: center;
   background: #fff;
   color: #555;
   border-radius: 20px;
   padding: 10px 0 12px 0;
   box-shadow: 0 2px 16px rgba(52, 104, 247, 0.10), 0 0 30px 0px var(--service-shadow);
   font-weight: 500;
   font-size: 1.03rem;
   pointer-events: auto;
   border-bottom: 5px solid var(--service-main);
   transition: transform 0.24s cubic-bezier(.68, -0.2, .46, 1.2), background 0.18s;
   background: var(--service-bg);
 }

 .service:hover {
   transform: scale(1.075) translateY(-3px);
   background: var(--service-hover);
   color: #fff;
   z-index: 3;
   box-shadow: 0 4px 32px 8px var(--service-shadow);
   border-bottom: 7px solid var(--service-main);
 }

 .right-panel .carousel-heading {
   font-weight: 700;
   margin-bottom: 18px;
   user-select: none;
   color: #3857a7;
   text-align: center;
   font-size: 1.55rem;
 }

 .right-panel {
   justify-content: flex-start;
   align-items: flex-start;
 }

 .swiper {
   width: 100%;
   max-width: 720px;
   margin: 0 auto;
   padding-bottom: 18px;
   box-sizing: border-box;
 }

 .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: stretch;
 }

 .product-card {
   width: 100%;
   max-width: 340px;
   min-width: 230px;
   box-sizing: border-box;
   background: #f9fafc;
   border-radius: 14px;
   box-shadow: 0 3px 14px rgba(68, 124, 247, 0.08);
   padding: 20px 16px 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   user-select: none;
   transition: transform 0.27s cubic-bezier(.65, .25, .61, 1.1), box-shadow 0.3s ease;
   margin: 0;
 }

 .product-card:hover {
   transform: scale(1.045) translateY(-3px);
   box-shadow: 0 8px 24px 8px rgba(100, 124, 247, 0.12);
   cursor: pointer;
 }

 .product-image {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 4px 12px rgba(81, 231, 252, 0.06);
   margin-bottom: 15px;
   background: #dce7fa;
 }

 .product-title {
   font-size: 1.14rem;
   font-weight: 700;
   margin-bottom: 7px;
   text-align: center;
   color: #3857a7;
 }

 .product-short {
   font-size: 1rem;
   color: #555;
   margin-bottom: 18px;
   text-align: center;
   min-height: 3.2em;
 }

 .view-btn {
   background: #d81324;
   color: #fff;
   border: none;
   border-radius: 30px;
   padding: 10px 22px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   box-shadow: 0 2px 13px #446cf71a;
   transition: background 0.25s ease;
   width: 100%;
   max-width: 160px;
 }

 .view-btn:hover,
 .view-btn:focus {
   background: #3857a7;
   outline: none;
 }

 .swiper-button-next,
 .swiper-button-prev {
   color: #446cf7;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   /* box-shadow: 0 2px 13px 0 #446cf71a; */
   top: 45%;
   user-select: none;
   transition: background-color 0.2s ease;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
   color: #d81324;
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
   font-size: 18px;
   font-weight: 700;
 }

 .product-gap-fill {
   width: 100%;
   display: flex;
   justify-content: center;
 }

 .feature-row {
   display: flex;
   gap: 40px;
   background: #f5f8fc;
   border-radius: 16px;
   padding: 24px 32px;
   margin-top: 10px;
   box-shadow: 0 4px 16px rgba(44, 103, 247, 0.05);
 }

 .feature-icon {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 7px;
   font-size: 1rem;
   color: #446cf7;
   font-weight: 500;
 }

 .feature-icon img {
   margin-bottom: 3px;
 }

 @media (max-width: 900px) {
   .feature-row {
     gap: 18px;
     padding: 13px 2px;
     flex-wrap: wrap;
   }

   .feature-icon {
     font-size: .91rem;
   }

   .swiper {
     max-width: 99vw;
   }

   .product-card {
     max-width: 99vw;
   }
 }

 .offcanvas {
   width: 360px !important;
   max-width: 90vw;
   padding: 28px 26px 20px;
 }

 .offcanvas-header {
   border-bottom: 1px solid #e6ecff;
   margin-bottom: 20px;
 }

 .offcanvas-title {
   font-size: 1.42rem;
   font-weight: 700;
   color: #3857a7;
   padding-left: 5px;
 }

 .offcanvas-body {
   padding: 0 5px;
   color: #555;
 }

 .offcanvas-product-img {
   width: 140px;
   height: 140px;
   border-radius: 28px;
   box-shadow: 0 6px 20px #446cf71c;
   object-fit: cover;
   margin: 0 auto 24px auto;
   display: block;
 }

 .offcanvas-extra {
   font-size: 1.1rem;
   color: #446cf7;
   background: #edf4fd;
   padding: 10px 12px;
   border-radius: 10px;
   margin-bottom: 18px;
   font-weight: 600;
 }

 .offcanvas-desc {
   font-size: 1.05rem;
   line-height: 1.6;
 }


 .footer a {
   color: white;
   text-decoration: none;
 }

 .topbar a {
   color: black;
   text-decoration: none;
 }

 .footer a:hover,
 .topbar a:hover {
   color: red;
 }

 .carousel-control-prev-icon,
 .carousel-control-next-icon {
   filter: brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(2151%) hue-rotate(337deg) brightness(92%) contrast(97%);
 }

 .carousel-control-prev,
 .carousel-control-next {
   opacity: 0.7 !important;
 }

 .carousel-control-prev:hover,
 .carousel-control-prev:focus,
 .carousel-control-next:hover,
 .carousel-control-next:focus {

   opacity: 1 !important;
 }


 /* whatsapp button */
 .whatsapp-wrapper {
   position: fixed;
   top: 80%;
   left: 30px;
   z-index: 99;

 }

 .whatsapp-info,
 .pulse {
   font-family: 'Lato', sans-serif;
   display: inline-block;
   color: #fff;
   background: #1ab744;
   position: fixed;
   top: 80%;
   left: 30px;
   font-size: 45px;
   text-align: center;
   z-index: 99;
   border-radius: 90%;
   height: 70px;
   width: 70px;
   line-height: 70px;
   cursor: pointer;
   -webkit-transition: all 0.2s;
   -moz-transition: all 0.2s;
   transition: all 0.2s
 }

 @-webkit-keyframes pulse {
   0% {
     -webkit-transform: scale(.1);
     transform: scale(.1);
     opacity: 0
   }

   50% {
     opacity: .3
   }

   100% {
     -webkit-transform: scale(2);
     transform: scale(2);
     opacity: 0
   }
 }

 @keyframes pulse {
   0% {
     -webkit-transform: scale(.1);
     transform: scale(.1);
     opacity: 0
   }

   50% {
     opacity: .3
   }

   100% {
     -webkit-transform: scale(2);
     transform: scale(2);
     opacity: 0
   }
 }

 .pulse:nth-child(1) {
   -webkit-animation: pulse 2s infinite;
   animation: pulse 2s infinite
 }

 .pulse:nth-child(2) {
   -webkit-animation: pulse 2s infinite .3s;
   animation: pulse 2s infinite .3s
 }

 .pulse:nth-child(3) {
   -webkit-animation: pulse 2s infinite .6s;
   animation: pulse 2s infinite .6s
 }

 @media (max-width: 480px) {

   .whatsapp-info,
   .pulse {
     font-size: 24px;
     height: 45px;
     width: 45px;
     line-height: 45px;
   }

   .whatsapp-wrapper {
     left: 15px;
     /* move closer to screen edge */
     top: 85%;
   }
 }

 .service-card-hover {
   background: #fff;
   border-radius: var(--card-radius);
   /* box-shadow: 0 2.5px 14px rgba(120, 140, 210, 0.10); */
   box-shadow: 0 16px 40px rgb(113 127 153);
   padding: 2.2rem 1.2rem 1.5rem 1.2rem;
   transition: box-shadow 0.21s, transform 0.17s;
   position: relative;
   overflow: hidden;
   border: 1.5px solid #e9eefe;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .service-card-hover:hover,
 .service-card-hover:focus-within {
   box-shadow: 0 16px 40px rgba(50, 100, 200, 0.13);
   transform: translateY(-6px) scale(1.027);
   /* border: 1.5px solid #d81324; */
 }

 .icon-border {
   background: #eaf0ff;
   border-radius: 50%;
   box-shadow: 0 2px 18px #93b5fd29;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 74px;
   height: 74px;
   transition: box-shadow 0.2s, background 0.21s;
   will-change: transform;
 }

 .service-card-hover:hover .icon-border {
   box-shadow: 0 4px 22px #7daeff4b;
   background: #f6f9ff;
   animation: floatIcon 0.6s;
 }

 .s-card-row {
   --card-radius: 1.35rem;
 }

 @media (max-width: 460px) {
   .navbar h2 {
     font-size: 20px !important;
   }
 }

 @media (max-width: 360px) {
   .navbar h2 {
     font-size: 14px !important;

   }

   .navbar-toggler-icon {
     width: 20px !important;
   }
 }

 @media (max-width: 576px) {
   .fact h2 {
     font-size: 1.2rem;
     /* smaller numbers */
   }

   .fact p {
     font-size: 0.8rem;
   }

   .fact i {
     font-size: 1.5rem;
   }
 }

 h2[data-toggle="counter-up"]::after {
   content: "+";
   margin-left: .25rem;
   font-weight: inherit;
   line-height: 1;
   vertical-align: baseline;
 }

/* About Hero Section Styles */
.about-hero-section {
   padding: 80px 0;
   background: linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);
   position: relative;
   overflow: hidden;
}

.about-hero-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23d81324" opacity="0.05"/><circle cx="75" cy="75" r="1" fill="%230b2154" opacity="0.05"/><circle cx="50" cy="10" r="0.5" fill="%23d81324" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
   pointer-events: none;
}

.about-content {
   position: relative;
   z-index: 2;
}

.section-header {
   margin-bottom: 2rem;
}

.section-subtitle {
   color: #d81324;
   font-weight: 600;
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 0.5rem;
   display: block;
}

.section-title {
   color: #0b2154;
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 0;
   text-shadow: 0 2px 4px rgba(11, 33, 84, 0.1);
}

.about-description .lead-text {
   font-size: 1.1rem;
   color: #5a6c7d;
   line-height: 1.7;
   margin-bottom: 2.5rem;
   font-weight: 400;
}

.about-features {
   margin-bottom: 2.5rem;
}

.feature-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 1.5rem;
   padding: 1rem;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(11, 33, 84, 0.05);
   border-left: 4px solid #d81324;
   transition: all 0.3s ease;
}

.feature-item:hover {
   transform: translateX(5px);
   box-shadow: 0 4px 20px rgba(11, 33, 84, 0.1);
   background: rgba(255, 255, 255, 0.9);
}

.feature-icon {
   background: linear-gradient(135deg, #d81324, #ff4757);
   color: white;
   width: 50px;
   height: 50px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 1rem;
   box-shadow: 0 4px 15px rgba(216, 19, 36, 0.3);
   flex-shrink: 0;
}

.feature-icon i {
   font-size: 1.2rem;
}

.feature-content h5 {
   color: #0b2154;
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 0.3rem;
}

.feature-content p {
   color: #6c7b7f;
   font-size: 0.95rem;
   margin: 0;
   line-height: 1.5;
}

.about-actions {
   display: flex;
   align-items: center;
   gap: 2rem;
   flex-wrap: wrap;
}

.theme-btn {
   background: linear-gradient(135deg, #d81324, #ff4757);
   color: white;
   padding: 12px 30px;
   border-radius: 25px;
   text-decoration: none;
   font-weight: 600;
   font-size: 1rem;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   box-shadow: 0 4px 15px rgba(216, 19, 36, 0.4);
   transition: all 0.3s ease;
   border: none;
   position: relative;
   overflow: hidden;
}

.theme-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s ease;
}

.theme-btn:hover::before {
   left: 100%;
}

.theme-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 25px rgba(216, 19, 36, 0.5);
   color: white;
   text-decoration: none;
}

.about-stats {
   display: flex;
   gap: 1.5rem;
}

.stat-item {
   text-align: center;
}

.stat-number {
   display: block;
   font-size: 1.8rem;
   font-weight: 700;
   color: #d81324;
   line-height: 1;
}

.stat-label {
   display: block;
   font-size: 0.85rem;
   color: #6c7b7f;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-top: 0.25rem;
}

.about-image-container {
   position: relative;
   z-index: 2;
}

.about-main-image {
   position: relative;
   margin: 0;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(11, 33, 84, 0.15);
   transition: all 0.3s ease;
}

.about-main-image:hover {
   transform: translateY(-5px);
   box-shadow: 0 25px 80px rgba(11, 33, 84, 0.2);
}

.about-main-image img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.3s ease;
}

.about-main-image:hover img {
   transform: scale(1.05);
}

.image-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(11, 33, 84, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: all 0.3s ease;
}

.about-main-image:hover .image-overlay {
   opacity: 1;
}



.floating-element {
   position: absolute;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: 15px;
   padding: 1rem;
   box-shadow: 0 8px 25px rgba(11, 33, 84, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   animation: float 3s ease-in-out infinite;
}

.element-1 {
   top: 10%;
   right: -10px;
   animation-delay: 0s;
}

.element-2 {
   bottom: 30%;
   left: -15px;
   animation-delay: 1s;
}

.element-3 {
   top: 40%;
   right: -20px;
   animation-delay: 2s;
}

.floating-content {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
   font-weight: 600;
   color: #0b2154;
   white-space: nowrap;
}

.floating-content i {
   color: #d81324;
   font-size: 1rem;
}

@keyframes float {
   0%, 100% {
       transform: translateY(0px);
   }
   50% {
       transform: translateY(-10px);
   }
}

/* Responsive Design */
@media (max-width: 991.98px) {
   .about-hero-section {
       padding: 60px 0;
   }
   
   .section-title {
       font-size: 2rem;
   }
   
   .about-actions {
       justify-content: center;
       text-align: center;
   }
   
   .floating-element {
       display: none;
   }
}

@media (max-width: 767.98px) {
   .section-title {
       font-size: 1.75rem;
   }
   
   .about-description .lead-text {
       font-size: 1rem;
   }
   
   .feature-item {
       flex-direction: column;
       text-align: center;
       align-items: center;
   }
   
   .feature-icon {
       margin-right: 0;
       margin-bottom: 1rem;
       align-self: center;
   }
   
   .feature-content {
       text-align: center;
       width: 100%;
   }
   
   .about-stats {
       justify-content: center;
       width: 100%;
   }
}

@media (max-width: 575.98px) {
   .about-hero-section {
       padding: 40px 0;
   }
   
   .section-title {
       font-size: 1.5rem;
   }
   
   .about-actions {
       flex-direction: column;
       align-items: center;
       gap: 1.5rem;
   }
   
   .feature-item {
       padding: 1.5rem 1rem;
       margin-bottom: 1.5rem;
   }
   
   .feature-icon {
       margin: 0 auto 1rem auto;
       display: flex;
   }
   
   .about-features {
       margin-bottom: 2rem;
   }
}