/* ------------------------------------------------ Project: Labozu - Laboratory & Science Research HTML5 Template Author: ThemeHt ------------------------------------------------ */ /* ------------------------ Table of Contents 1. General 2. Typography 3. Text color 4. Background color 5. Banner Slider 6. List Icon 7. Contact Form 8. Extra 9. Responsive Css ------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap'); /*@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');*/ :root { --themeht-primary-color: #a7246a; /*--themeht-secondary-color: #001d2d;#9d5980*/ --themeht-secondary-color: #9d5980; --themeht-text-color: #000812; --themeht-body-color: #4f4f4f; --themeht-white-color: #FFFFFF; --themeht-bg-dark-color: #010101; --themeht-bg-light-color: #efe5eb; --brand-maroon: #8e2157; --tech-gray: #4a5568; --bg-light: #fdfdfd; --brand-primary: #8a3361; --brand-light: #f4e9f0; --themeht-border-light-color: #E5E5E5; --themeht-rgba-color: rgba(255,255,255,0.9); --tw-bg-opacity: 1; /*--themeht-typography-body-font-family:"Raleway", sans-serif;*/ --themeht-typography-body-font-family:"Manrope", sans-serif; --themeht-typography-secondary-font-family: "Manrope", sans-serif; } /* ------------------------ General ------------------------*/ body {scroll-behavior: smooth;font-family: var(--themeht-typography-body-font-family);font-weight: 500;font-style: normal;font-size: 16px;line-height: 30px;color: #4f4f4f;overflow-x: hidden;} .page-wrapper{overflow-x: hidden;} /* ------------------------ Typography ------------------------*/ h1, h2, h3, h4, h5, h6 { font-family: var(--themeht-typography-secondary-font-family); font-weight: normal; margin-top: 0px; font-style: normal; margin-bottom: 20px; color: var(--themeht-text-color); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } .h1, h1 { font-size: 60px; line-height: 75px; font-weight: 800;} .h2, h2 { font-size: 40px; line-height: 58px; font-weight: 700; text-transform: capitalize;} .h3, h3 { font-size: 30px; line-height: 38px; font-weight: 600;} .h4, h4 { font-size: 26px; line-height: 34px; font-weight: 500;} .h5, h5 { font-size: 24px; line-height: 32px; font-weight: 500;} .h6, h6 { font-size: 20px; line-height: 30px; font-weight: 600;} ul { margin-left: 0; } label { display: inline-block; color: var(--themeht-text-color); font-size: 16px; margin-bottom: 7px; } @media (min-width: 1200px) { .container { max-width: 1320px; } } /* ------------------------ Helper class ------------------------*/ p{line-height: 1.7;} .lead{font-weight: normal; font-size: 17px; line-height: 30px;} .z-index-0{z-index: 0; position: relative;} .z-index-1{z-index: 1; position: relative;} section{padding: 90px 0; position: relative;} .rounded {border-radius: 24px !important;} .img-border { border: 10px solid var(--themeht-white-color); } /* ------------------------ Text color ------------------------*/ .text-theme{color: var(--themeht-primary-color);} .text-black{color: var(--themeht-text-color) !important;} .text-grey{color: var(--themeht-body-color);} .text-muted { color: #494949 !important;} /* ------------------------ Background color ------------------------*/ .white-bg{background-color: var(--themeht-white-color) !important;} .dark-bg{background-color: var(--themeht-bg-dark-color);} .light-bg{background-color: var(--themeht-bg-light-color);} .primary-bg{background-color: var(--themeht-primary-color);} .secondary-bg{background-color: var(--themeht-secondary-color);} .transparent-bg{background-color: inherit !important;} .border-light{border-color: var(--themeht-border-light-color) !important} /* ------------------------ Banner ------------------------*/ [data-bg-img] { background-size: cover; background-position: center center; background-repeat: no-repeat; } .banner-slider { background-color: var(--themeht-bg-dark-color); height: 650px; /*border-bottom-right-radius: 6.25rem;*/ /*border-bottom-left-radius: 6.25rem;*/ } .banner-slider .slider-img { background-size: cover; background-position: top center; background-repeat: no-repeat; position: absolute; top: 0; width: 100%; height: 100%; left: 0;} .banner-content { padding: 200px 0; position: relative; z-index: 9; } .slider-img::before { position: absolute; content: ''; /*background: linear-gradient(90deg, #ffffff 57%, #ffffff80 69%, rgb(255 255 255 / 0%) 76%);*/ /*background: linear-gradient(90deg, #f6fcff 57%, #d4cece80 69%, rgb(211 161 201 / 20%) 76%);*/ /*background: linear-gradient(90deg, #f6fcff 57%, #d4cece00 69%, rgb(211 161 201 / 0%) 76%);*/ width: 100%; height: 100%; top: 0; left: 0; opacity: 0.80; z-index: 9; } .banner-slider .swiper-button-next, .banner-slider .swiper-button-prev { transform: scale(0); width: 50px; height: 50px; background-image: none !important; border-radius: 100%; line-height: inherit; background: var(--themeht-primary-color); border: none; } .banner-slider .swiper-button-next:hover, .banner-slider .swiper-button-prev:hover { background: var(--themeht-bg-dark-color); } .banner-slider .swiper-button-next:after, .banner-slider .swiper-button-prev:after { font-size: 20px; color: var(--themeht-white-color); line-height: 50px !important; } .banner-slider .swiper-button-next:hover:after, .banner-slider .swiper-button-prev:hover:after { color: var(--themeht-white-color); } .banner-slider:hover .swiper-button-next, .banner-slider:hover .swiper-button-prev { transform: scale(1); } .banner-slider.swiper:hover .swiper-button-prev { left: 10px; } .banner-slider.swiper:hover .swiper-button-next { right: 10px; } #banner-pagination { position: absolute !important; right: 150px; left: inherit; margin: 0; text-align: right; width: auto; bottom: 50px; font-size: 18px; color: var(--themeht-white-color); } .banner-slider .themeht-btn + .themeht-btn { margin-left: 20px; } .banner-slider h6 { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .banner-slider h1 { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .banner-slider p { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); } .banner-slider .btn-box { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .banner-slider .swiper-slide-active h6 { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 500ms; } .banner-slider .swiper-slide-active h1 { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 1000ms; } .banner-slider .swiper-slide-active p { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 1500ms; color: #000; } .banner-slider .swiper-slide-active .btn-box { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 2000ms; } /*.banner-content { padding: 130px 0 100px 0px; position: relative; z-index: 9; }*/ /*.banner-content .banner-text { width: 75%; }*/ .banner-slider h1 { font-weight: 700; font-size: 56px; text-transform: capitalize; line-height: 72px; color: #b2298d; /*color: var(--themeht-primary-color); */ } .banner-slider h1 span { font-weight: 600; color: var(--themeht-text-color); display:block; } .banner-3 { padding: 50px 0; } .banner-3 .banner-img { width: 700px; height: 700px; background-size: cover; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); } .banner-1 h6 span { background: var(--themeht-primary-color); display: inline-block; padding: 8px 14px; border-radius: 4px; font-size: 14px; line-height: 1; color: var(--themeht-white-color); margin-right: 10px; } .banner-4 .slider-img::before { position: absolute; content: ''; background: linear-gradient(90deg, var(--themeht-primary-color) 42%, #ffffff80 50%, rgb(255 255 255 / 0%) 100%); opacity: 1 } .banner-4 h6, .banner-4 h1, .banner-4 h1 span, .banner-4 p { color: var(--themeht-white-color); } .banner-1 { position: relative; overflow: hidden; } .banner-1 .carousel-inner, .banner-1 .carousel-item, .banner-1 .banner-bg { height: 800px; } .banner-1 .carousel-item { transition: transform 1s ease-in-out; } .banner-content-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner-content-wrapper .container, .banner-content-wrapper .row { height: 100%; } .banner-text { position: relative; z-index: 2; } .banner-1{ /*background-image: url(../images/bnr_img.webp);*/ /*background-image: url(../images/12324435.webp);*/ background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .banner-1::before { position: absolute; content: ''; /*background: #000;*/ width: 100%; height: 100%; top: 0; left: 0; /*opacity: 0.4;*/ z-index: 9; /*background: rgb(0 0 0 / 28%);*/ /*background: rgb(79 24 54 / 73%);*/ background: rgb(139 44 95 / 4%); background-image: linear-gradient(59deg, #2d0319c9 0%, #3838383b 76%); } .banner-content{ padding: 200px 0px 200px 00px; /* text-align: center; */ width: 100%; } .banner-content .banner-text{ width: 100%; } .banner-1 h6 { color: #dcdcdc; display: inline-block; border-radius: 4px; font-size: 14px; letter-spacing: 2px; } .banner-1 h1{ /*color: var(--themeht-white-color) !important;*/ text-transform: capitalize; font-size: 70px; line-height: 80px; -webkit-background-clip: text; background-clip: text; /*background-image: linear-gradient(to right, #c5c5c5, #f1f1f1, #c5c5c5);*/ color: transparent; background-image: linear-gradient(to right, #ffffff, #f1f1f1, #c5c5c5); } .banner-1 h4{ color: #fff; font-weight: 300; font-size: 26px; line-height: 38px; margin-top: -15px; } .banner-content p { max-width: 100%; margin: 0; color: #ffffffcf !important; font-size: 18px; line-height: 2rem; } .hero-sections .themeht-btn.primary-btn{ width: 180px !important; margin: auto; } .hero-content{ background: #fff; padding: 30px; border-radius: 8px; border: 1px solid #eaeaea; min-height: 200px; } .hero-content p{ margin-bottom: 0; text-align: justify; } .who-we{ background: #f9fafb; } .who-img-wdt{ width: 89%; box-shadow: rgb(231, 231, 231) 0px 0px 9px 0px; border-radius: 5px; position: relative; } .who-img-wdts{ width: 100%; box-shadow: rgb(231, 231, 231) 0px 0px 9px 0px; border-radius: 5px; position: relative; } .who-img-wdtss{ width: 100%; box-shadow: rgb(231, 231, 231) 0px 0px 9px 0px; border-radius: 5px; position: relative; } .who-img-wdt:before{ content: ''; display: block; width: 100%; height: 100%; border-radius: 5px; background-color: #8b2c5f; position: absolute; left: -20px; bottom: -20px; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .who-img-wdts:before{ content: ''; display: block; width: 100%; height: 100%; border-radius: 5px; background-color: #8b2c5f; position: absolute; left: -20px; bottom: -20px; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .who-img-wdtss:before{ content: ''; display: block; width: 100%; height: 100%; border-radius: 5px; background-color: #8b2c5f; position: absolute; right: -20px; bottom: -20px; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .who-img-wdt img{ border-radius: 5px; position: relative; z-index: 10; } .who-img-wdts img{ border-radius: 5px; position: relative; z-index: 10; } .who-img-wdtss img{ border-radius: 5px; position: relative; z-index: 10; } #dynamic-medical-section .bg__overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgb(0 0 0 / 62%) 60%, transparent 100%); z-index: 2; } .active-col .text-white-50{ color: rgb(255 255 255 / 88%) !important; } #dynamic-medical-section .card{ position:relative; } #dynamic-medical-section .card:before{ content:''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #3b162a59; right: 0; z-index: 1; bottom: 0; } .theme-title .stat-box h6 { color: #1d191b; line-height: 1; padding-left: 16px } .right { position: relative; display: table-cell; vertical-align: top; width: 50%; padding: 0 15px; } .right span { position: absolute; display: block; width: 16px; height: 16px; border: 2px solid #FFF; background: #8b2c5f; border-radius: 50%; cursor: pointer; } .right span i { position: absolute; top: -30px; left: -250%; line-height: 22px; padding: 0 12px; background: rgba(0, 0, 0, .8); border-radius: 3px; color: #FFF; font-size: 11px; opacity: 0; visibility: hidden; } .right span:hover i { opacity: 1; visibility: visible; } .right span:nth-child(2) { left: 13%; top: 23%; animation: OrangePulse 1.8s infinite; -webkit-animation: OrangePulse 1.8s infinite; } .right span:nth-child(3) { left: 63%; top: 38%; animation: OrangePulse 2s infinite; -webkit-animation: OrangePulse 2s infinite; } .right span:nth-child(4) { left: 44%; top: 16%; animation: OrangePulse 1.9s infinite; -webkit-animation: OrangePulse 1.9s infinite; } .right span:nth-child(5) { left: 39%; top: 25%; animation: OrangePulse 2.1s infinite; -webkit-animation: OrangePulse 2.1s infinite; } .right span:nth-child(6) { left: 20%; top: 56%; animation: OrangePulse 2.1s infinite; -webkit-animation: OrangePulse 2.1s infinite; } .right span:nth-child(7) { left: 72%; top: 43%; animation: OrangePulse 2.1s infinite; -webkit-animation: OrangePulse 2.1s infinite; } @keyframes OrangePulse{ 0% { background-color: rgba(210, 174, 109, .2); -webkit-box-shadow: 0 0 10px rgb(139 44 95); } 50% { background-color: rgb(139 44 95); -webkit-box-shadow: 0 0 10px rgb(139 44 95); } 100% { background-color: rgba(139 44 95 .2); -webkit-box-shadow: 0 0 10px rgb(139 44 95); } } /*.btn-box .themeht-btn{*/ /* margin: 18px 15px 0;*/ /* font-size: 18px;*/ /* padding: 11px 46px;*/ /* border-radius: 12px;*/ /* font-weight: 800;*/ /*}*/ .btn-box .dark-btn{ margin-left: 20px; } /* ------------------------ Error ------------------------*/ .error-path { stroke-dasharray: 800; stroke-dashoffset: 800; animation: dash 5s linear alternate infinite; } .error-path path { stroke: var(--themeht-primary-color) } .error-path path:nth-child(2) { stroke: var(--themeht-primary-color) } .error-path path:nth-child(3) { stroke: var(--themeht-secondary-color) } /* ------------------------ Timeline ------------------------*/ .main-timeline:before { content: ""; display: block; width: 1px; height: 100%; background: var(--themeht-border-light-color); margin: 0 auto; position: absolute; left: 0; right: 0; } .timeline_item { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding-top: 10px; } .timeline-order-1 { order: 3; } .timeline-order-2 { order: 2; left: 20px; } .timeline-order-3 { order: 1; } .main-timeline .timeline-icon { width: 40px; height: 40px; position: relative; right: 20px; font-size: 30px; background: var(--themeht-white-color); display: flex; align-items: center; justify-content: center; color: var(--themeht-primary-color); border-radius: 50%; z-index: 9; } .main-timeline .date-content { width: 50%; position: relative; } .main-timeline .date-content:before { content: ""; width: 50%; height: 1px; background: var(--themeht-border-light-color); margin: auto 0; position: absolute; right: 10px; top: 0; bottom: 0; } .main-timeline .timeline-order-1:before { content: ""; width: 50%; height: 1px; background: var(--themeht-border-light-color); position: absolute; padding-right: 30px; margin-right: 50% !important; } .main-timeline .date { display: flex; line-height: 1; font-weight: 700; font-size: 30px; color: var(--themeht-white-color); position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); align-items: center; justify-content: center; background: var(--themeht-primary-color); border-radius: 50%; width: 125px; height: 125px; z-index: 1; } .main-timeline .timeline-content { padding: 20px 20px; } @media (max-width:640px) { .timeline { flex-direction: column !important; } .main-timeline:before { margin-left: 1px; } .main-timeline .timeline-icon { margin: auto 2px; } .main-timeline .timeline-content { padding: 40px 30px; } .timeline-order-1 { order: 2; } .timeline-order-2 { order: 1; left: -1em; } .timeline-order-3 { order: 3; } .timeline-order-1b { order: 2; } .timeline-order-2b { order: 1; left: -1em; } .timeline-order-3b { order: 3; } .main-timeline .timeline-order-1:before { width: 100%; } .main-timeline .timeline-order-1b:before { width: 100%; } .main-timeline .timeline-order-1b:before { content: ""; width: 100%; height: 2px; background: var(--themeht-border-light-color); position: absolute; top: 0; padding-right: 30px; bottom: 0; margin-right: 50% !important; } .main-timeline .date { width: 70px; height: 70px; } } @media (max-width:350px) { .timeline-icon { visibility: hidden; } .main-timeline .date-content:before { visibility: hidden; } .date-content { left: -15px; } } /* ------------------------ Video ------------------------*/ .video-btn{display: flex; align-items: center;} .video-btn-icon { position: relative; display: inline-block; z-index: 9; } .video-btn-icon > i { color: var(--themeht-primary-color); font-size: 30px; } .video-btn span { font-weight: 700; font-size: 16px; line-height: 1; color: var(--themeht-text-color); margin-left: 10px; flex-shrink: 0} .video-btn.style-2 { position: relative; display: inline-block; } .video-btn.style-2 .play-btn { animation: ripple-white 1s linear infinite; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; cursor: pointer; display: inline-block; text-align: center; position: relative; } .video-btn.style-2 .play-btn i { font-size: 34px; line-height: 1; position: absolute; top: 50%; left: 50%; color: var(--themeht-white-color); -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.2s ease-out !important; transform: translate3d(-50%, -50%, 0); } /* ------------------------ List Icon ------------------------*/ .cert img{ border: 1px solid #000; border-radius: 30px; } .qlt-box{ border-radius: 8px; /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */ padding: 0 58px; /*background: #eeeeee;*/ background: linear-gradient(0deg, rgb(247 247 247) 0%, rgb(246 246 246) 100%); /* position: relative; */ height: 100%; } .qlt-box .row{ border-radius: 8px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; padding: 50px; position: relative; top: 50px; /* left: 20px; */ /*background: #fff;*/ background-image: url(../images/bg/tra-bg-1.png); /*background-color: #fff;*/ background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #8b2c5f; } .bg-grad{ background: linear-gradient(0deg,rgba(242, 244, 247, 1) 0%, rgba(255, 255, 255, 1) 100%); border-bottom-left-radius: 42% 13%; border-bottom-right-radius: 42% 13%; } .gallery-section{ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; border-radius: 30px; padding: 42px 28px; } .bb-border { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .part-border { border: 1px solid rgba(0, 0, 0, 0.05) !important; border-radius: 30px; } .cust{ background: linear-gradient(0deg,rgba(248, 248, 248, 1) 0%, rgba(255, 255, 255, 1) 100%); } .list-icon.style-1 li { position: relative; display: flex; margin-bottom: 15px; /*align-items: center;*/ font-size: 15px; line-height: 28px; } .list-icon.style-1 li:last-child { margin-bottom: 0 } .list-icon.style-1 li i { color: var(--themeht-primary-color); font-size: 18px; line-height: 28px; margin-right: 10px; flex-shrink: 0; } .list-icon.style-2 li { position: relative; display: flex; margin-bottom: 15px; align-items: center; } .list-icon.style-2 li:last-child { margin-bottom: 0 } .list-icon.style-2 li i { color: var(--themeht-primary-color); font-size: 18px; line-height: 1; margin-right: 10px; } /* ------------------------ Marquee Text ------------------------*/ .marquee-wrap { width: 100%; position: relative; overflow: hidden; display: block; background: #8b2c5f; height: 50px; padding: 10px 0; } .marquee-text { animation: marquee 40s linear infinite; position: relative; width: 100%; white-space: nowrap; } .marquee-text span { /*font-size: 120px;*/ /*line-height: 85px;*/ /*margin: 0 30px;*/ /*font-weight: 800;*/ /*text-transform: uppercase;*/ /*color: var(--themeht-primary-color);*/ font-size: 16px; margin: 0 30px; font-weight: 800; text-transform: uppercase; color: #fbfbfb; } /*.marquee-text span:nth-child(2n+2) {*/ /* color: var(--themeht-white-color);*/ /* text-shadow: -1px -1px 0 var(--themeht-text-color), 1px -1px 0 var(--themeht-text-color), -1px 1px 0 var(--themeht-text-color), 1px 1px 0 var(--themeht-text-color);*/ /*}*/ /*.marquee-wrap:before { position: absolute; right: 0; top: 0; width: 30%; height: 100%; content: ""; z-index: 9; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 98%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4ef17', endColorstr='#c4ef17', GradientType=1); }*/ /*.marquee-wrap:after { position: absolute; left: 0; top: 0; width: 30%; height: 100%; content: ""; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c4ef17', endColorstr='#c4ef17', GradientType=1); }*/ /* ------------------------ Countdown ------------------------*/ .countdown{margin:50px 0; padding:50px 0; display: table; width: 100%; border-top: 2px dashed var(--themeht-border-light-color); border-bottom: 2px dashed var(--themeht-border-light-color);} .countdown > li{ font-weight: 700; text-align: center; list-style-type: none; display: table-cell; width: auto;} .countdown > li span{font-size:70px; font-weight:700; line-height:60px; display: inline-block;} .countdown > li p{font-size:20px; display: inline-block; line-height:30px; margin-bottom: 0; color: var(--themeht-text-color);} .coming-soon .subscribe-form{margin: 0 auto;} .box-abu{ box-shadow: rgb(231, 231, 231) 0px 0px 9px 0px; padding: 2rem; border-radius: 5px; border-bottom: 2px solid rgb(139 44 95); background: rgb(241 241 241 / 38%); /*background: linear-gradient(0deg,rgba(248, 247, 248, 1) 0%, rgba(239, 239, 239, 1) 100%);*/ margin-bottom: 21px; min-height: 200px; } .box-abu img{ width: 32px; margin-right: 10px; } .box-abu p{ margin-bottom: 0px; } /*.bg_gradient1 {*/ /* background: linear-gradient(179deg, rgb(255 255 255) 0%, #e0e3f5a1 28%);*/ /*}*/ .section-row .section-titles { width: 100%; margin: 0 auto; text-align: center; } .colss { position: relative; } .colss::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: -webkit-linear-gradient(90deg, rgb(247, 241, 235) 5%, rgb(139 44 95) 50%, rgb(247, 241, 235) 95%); } .colss-bot { /*padding-bottom: 30px;*/ position: relative; } .colss-bot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: -webkit-linear-gradient(180deg, rgb(247, 241, 235) 10%, rgb(139 44 95) 50%, rgb(247, 241, 235) 90%); } .services-inn-sec{ padding: 30px; text-align: center; } .services-inn-sec img{ width: 75%; } .services-inn-sec:hover img{ /*transform: scale(1.1);*/ } .services-inn-sec h3 { font-size: 18px !important; font-weight: 600; line-height: 26px; margin: 12px 0; } .our-approachs .services-inn-sec:not(.alspl_col) p { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .our-approachs .services-inn-sec .alspl_col{ display: inherit !important; -webkit-line-clamp: inherit !important; /*text-align:left;*/ font-size: 16px !important; letter-spacing: 0px; font-weight: 500; font-style: normal; line-height: 30px; color: #4f4f4f; } /* ------------------------ Shape & Animation ------------------------*/ .animated-icon-shape { position: absolute; top: 0; width: 100%; height: 100%; left: 0; z-index: -1; } .small-circle-animation { animation: small-animation 2s infinite linear; position: absolute; width: 60px; } .animated-icon-shape img:nth-child(1) { left: 6%; top: 10%; } .animated-icon-shape img:nth-child(2) { left: 2%; bottom: 15%; animation: small-animation2 2s infinite linear;} .animated-icon-shape img:nth-child(3) { right: 6%; top: 5%; animation: small-animation2 2s infinite linear;} .animated-icon-shape img:nth-child(4) { right: 2%; bottom: 20%; } .animated-icon-shape.style-2 img:nth-child(2) { left: auto; right: 2%; bottom: 20%; } #particles-js { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .link-about { border: 1px solid #46143c; border-radius: 17px; padding: 20px 30px 20px 20px; background: #fff; } .link-about span { padding: 5px 15px; background-color: var(--themeht-bg-dark-color); border-radius: 4px; color: var(--themeht-white-color); margin-right: 10px } .link-about a { color: var(--themeht-primary-color); margin-left: 10px; font-weight: 700; text-decoration: underline !important; } .customisation-sec-bg { background-image: url(../images/bg/bg-crosses.jpg); /*background: #000;*/ background-repeat: no-repeat; background-position: center; background-size: cover } .our-approachs .services-inn-sec p{ } .testimonial-sec-bg { background-image: url(../images/bg/left-side-dots.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } /*.testimonial-sec-bg::after {*/ /* content: "";*/ /* position: absolute; */ /* top: 0; */ /* left: 0;*/ /* background-image: url(../images/bg/left-side-dots.jpg);*/ /* background-repeat: no-repeat;*/ /* background-position: center;*/ /* background-size: cover;*/ /* opacity: .9;*/ /* }*/ .testimonial-sec-bg.style-2 { } .sonar-wrapper { z-index: 0; position: absolute; right: 70px; bottom: 20%; } .sonar-emitter { position: relative; margin: 0 auto; width: 100px; height: 100px; border-radius: 9999px; background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); } .sonar-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 9999px; background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); opacity: 0; z-index: -1; pointer-events: none; } .sonar-wave { animation: sonarWave 2s linear infinite; } .spinner { position: absolute; right: 100px; top: 15%; z-index: 30; } .spinner::after, .spinner::before { box-sizing: border-box; position: absolute; content: ""; width: 50px; height: 50px; top: 50%; animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; left: 50%; background: var(--themeht-primary-color); } .spinner::after { background: var(--themeht-secondary-color); top: calc(50% - 50px); left: calc(50% - 50px); animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; } .image-video-sec { padding: 400px 0 120px; } .bg-dark-gradient-overlay { position: relative; overflow: hidden; z-index: 9; } .bg-dark-gradient-overlay:before { background: -webkit-gradient(linear, left bottom, left top, color-stop(7%, #141622), to(transparent)); background: linear-gradient(to top, #141622 7%, transparent 100%); opacity: .75; position: absolute; height: 100%; width: 100%; top: 0; left: 0; content: ""; z-index: -1; } .ht-first-letter::first-letter { font-size: 30px; line-height: 30px; padding: 8px; margin-top: 5px; border-radius: 5px; display: inline-block; float: left; font-weight: 700; margin-right: 8px; background: var(--themeht-primary-color); color: var(--themeht-white-color); } /* ------------------------ Clients Logo ------------------------*/ .clients-logo { text-align: center; } .clients-logo img {width: 150px; /*-webkit-filter: contrast(0%); */ /*filter: contrast(0%); */ box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear; cursor: pointer; } .clients-logo:hover img { -webkit-filter: none; filter: none; opacity: 1; } .client-text { text-align: center; position: relative; } .client-text:before { content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1; background: var(--themeht-border-light-color); width: 70%; height: 1px; } .client-text span { background: var(--themeht-white-color); padding: 5px 40px; } .client-texts h3 span{ font-size: 41px; line-height: 50px; font-weight: 600; color: var(--themeht-primary-color); } .client-swiper .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; position: relative; } .client-swiper .swiper-slide { display: flex; align-items: center; width: auto !important; padding: 2px 25px; } .stat-icon { font-size: 2rem; color: #8a3361; margin-bottom: 1rem; } .stat-box { background: #fdf7f9; border-radius: 16px; padding: 1.5rem; height: 100%; border: 1px solid rgba(138, 51, 97, 0.1); transition: all 0.3s ease; } .stat-box h6{ margin: 6px 0; } .stat-box:hover { background: white; box-shadow: 0 20px 40px rgba(0,0,0,0.08); transform: scale(1.02); } /* ------------------------ Extra ------------------------*/ .contact-info{padding: 30px;} .contact-info li { padding-left: 50px; padding-top: 5px; position: relative; margin-bottom: 20px; } .contact-info li:last-child { margin-bottom: 0; } .contact-info li i { position: absolute; left: 0; top: 0; line-height: 50px; font-size: 36px; color: var(--themeht-primary-color); display: inline-block; } .contact-info li span { font-size: 12px; line-height: 1; color: var(--themeht-body-color); font-weight: 700; display: block; margin-bottom: 4px; text-transform: uppercase; } .contact-info li p { margin-bottom: 0; line-height: 24px; color: var(--themeht-text-color); } .contact-info li a { color: var(--themeht-text-color); } .contact-info li a:hover { color: var(--themeht-primary-color); } .form-group { margin-bottom: 20px; position: relative; } label { font-size: 14px; line-height: 1; color: var(--themeht-text-color) } .form-control { height: 55px; border-radius: 4px; font-size: 14px; color: var(--themeht-text-color); background-color: var(--themeht-white-color); border: 1px solid var(--themeht-border-light-color); } textarea.form-control { height: 120px; border-radius: 4px; } .form-control:focus { box-shadow: none; background: none; border-color: var(--themeht-primary-color); } select.form-control { -moz-appearance: none; -webkit-appearance: none; appearance: none; height: 55px !important; color: var(--themeht-body-color); } iframe { width: 100%; border: none; pointer-events: auto; } .iframe-h { height: 500px !important; } .iframe-h-2 { height: 600px !important; } .map iframe { border: 0px; width: 100%; height: 100%; z-index: 1; -webkit-filter: brightness( 100% ) contrast( 100% ) saturate( 50% ) blur( 0px ) hue-rotate( 0deg ); -moz-filter: brightness( 100% ) contrast( 100% ) saturate( 50% ) blur( 0px ) hue-rotate( 0deg ); -ms-filter: brightness( 100% ) contrast( 100% ) saturate( 50% ) blur( 0px ) hue-rotate( 0deg ); -o-filter: brightness( 100% ) contrast( 100% ) saturate( 50% ) blur( 0px ) hue-rotate( 0deg ); filter: brightness( 100% ) contrast( 100% ) saturate( 50% ) blur( 0px ) hue-rotate( 0deg ); } .help-block.with-errors { position: absolute; color: red; right: 15px; font-size: 10px; line-height: 14px; } .form-control::-webkit-input-placeholder { color: var(--themeht-body-color); } .form-control::-moz-placeholder { color: var(--themeht-body-color); } .form-control:-ms-input-placeholder { color: var(--themeht-body-color); } .form-control:-moz-placeholder { color: var(--themeht-body-color); } /* Base Card styles */ .hover-card { border-radius: 16px; background: #f6f6f6; border: 1px solid rgba(0, 0, 0, 0.05) !important; position: relative; cursor: pointer; /* The "Elastic" Bezier: This allows the card to overshoot its size slightly and settle */ transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.4s ease; transform: scale(1); /* Starting point */ will-change: transform; /* Optimizes browser performance for smooth zoom */ } /* 1. The Immersive Hover (Zoom In) */ .hover-card:hover { z-index: 10; /* Slightly more pronounced zoom + slight upward lift */ transform: scale(1.04) translateY(-8px); /* background: linear-gradient(65deg, rgb(139 44 95), rgb(139 44 95) 100%, rgb(145, 10, 154)) !important; */ box-shadow: 0 20px 40px rgba(48, 36, 153, 0.25); overflow: hidden; background-image: url(../images/bg/tra-bg-1.png); /* background-color: #fff; */ background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #8b2c5f; } /* 2. The "Click" Effect (Zoom Out/Squish) */ .hover-card:active { /* When clicked, it 'squishes' down like a real physical button */ transform: scale(0.97) translateY(-2px); transition: transform 0.1s ease; } /* 3. The Light Sweep (Immersive Shine) */ .hover-card::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( to right, transparent, rgba(255, 255, 255, 0.2), transparent ); transform: skewX(-25deg); transition: 0.5s; display: none; } .hover-card:hover::before { left: 125%; transition: 0.7s; } /* Icon box adjustments for smooth zoom */ .icon-box { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .hover-card:hover .icon-box { transform: scale(1.1) rotate( 181deg); /* Icon zooms and tilts slightly */ background: rgb(255 255 255 / 72%); color: #fff; } /* Text & description logic */ .hover-card:hover .card-title-text, .hover-card:hover .card-number-text { color: #ffffff !important; } .hover-card:hover .card-description-text { color: rgba(255, 255, 255, 0.8) !important; } /* Base Card styles */ /*.hover-card {*/ /* border-radius: 12px;*/ /* background: #ffffff;*/ /* border: 1px solid #f0f0f0 !important;*/ transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Smooth transition */ /* cursor: pointer;*/ /*}*/ /* Icon Box Style */ /*.icon-box {*/ /* width: 48px;*/ /* height: 48px;*/ /* min-width: 48px;*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /* background: #f8f9fa;*/ /* border-radius: 10px;*/ /* border: 1px solid #eee;*/ /* color: #302499;*/ /* font-size: 1.2rem;*/ /* transition: all 0.3s ease;*/ /*}*/ /* Hover State Effects */ /*.hover-card:hover {*/ transform: scale(1.03); /* Zoom-in effect */ /* background: linear-gradient(65deg, rgb(48, 36, 153), rgb(154, 8, 154) 100%, rgb(145, 10, 154)) !important;*/ /* box-shadow: 0 10px 20px rgba(48, 36, 153, 0.2) !important;*/ /*}*/ /* Change text colors on hover */ /*.hover-card:hover .card-title-text,*/ /*.hover-card:hover .card-number-text {*/ /* color: #ffffff !important;*/ /*}*/ /*.hover-card:hover .card-description-text {*/ /* color: rgba(255, 255, 255, 0.8) !important;*/ /*}*/ /* Change icon box on hover */ /*.hover-card:hover .icon-box {*/ /* background: rgba(255, 255, 255, 0.2);*/ /* border-color: rgba(255, 255, 255, 0.3);*/ /* color: #ffffff;*/ /*}*/ /* Extra letter spacing for the subtitle */ /*.tracking-wider {*/ /* letter-spacing: 0.15rem;*/ /*}*/ .breadcrumb { margin-bottom: 2px !important; } .breadcrumb { display: flex; flex-wrap: wrap; padding: 0 0; margin-bottom: 0; list-style: none; justify-content: left; /*border-bottom: 1px solid #dadada;*/ } .banner12{ border-bottom: 1px solid #dadada; } .breadcrumbs { height: auto !important; } .breadcrumbs { display: flex; justify-content: center; align-items: center; gap: 13px; padding: 8px; height: 52px; list-style: none; margin-bottom: 0 !important; } .breadcrumbs li { opacity: 1; } .breadcrumbs li { opacity: 1; } .active-col ul li i{ color:#d8d8d8 !important; } .vertical_intergration p.fs-5{ font-size: 16px !important; } /* Color Accents */ .custom-plum-text { color: #903665 !important; } .custom-plum-border { border-color: #903665 !important; } /* Image Container Styling */ .about-image-card { border-radius: 20px; transition: transform 0.4s ease; background: #ffffff; padding: 10px; } .about-image-card:hover { transform: translateY(-10px); } /* Floating Badge Styling */ .experience-badge { position: absolute; bottom: -20px; left: 20px; width: 140px; z-index: 5; animation: bounceBadge 4s ease-in-out infinite; } /* Animation for the Badge */ @keyframes bounceBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* Text spacing */ .about-description p { font-size: 0.98rem; } .about-description .lead { font-size: 1.15rem; } .evolution-section .card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .evolution-section .card:hover { transform: translateY(-10px); box-shadow: 0 1rem 3rem rgba(0,0,0,0.125) !important; } .evolution-section h3 { color: #001d3d; font-size: 1.5rem; } .evolution-section .bi-check2-circle { font-size: 1.2rem; } .evolution-section .bg-light { transition: background 0.3s ease; } .evolution-section .card:hover .bg-light { background: #fdf2f7 !important; /* Very light plum tint on hover */ } /* Color Accents */ .custom-plum-text { color: #903665 !important; } /* Segment Tags Styling */ .segment-tag { background: #f8f9fa; border: 1px solid #e9ecef; padding: 10px 15px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: #495057; transition: all 0.2s ease; text-align: center; } .segment-tag:hover { background: #903665; color: #fff; border-color: #903665; } /* Production List Styling */ .production-list li { display: flex; align-items: flex-start; margin-bottom: 1.5rem; } .production-list li i { font-size: 1.25rem; margin-right: 1.2rem; background: #fdf2f7; padding: 10px; border-radius: 50%; } .production-list li strong { display: block; color: #001d3d; font-size: 1.05rem; } .custom-plum-text { color: #903665 !important; } .custom-plum-border { border-color: #903665 !important; } .custom-list li { position: relative; padding-left: 0px; color: #495057; list-style: disc; } .custom-list li::before { content: ""; color: #903665; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; } /* Adds a nice hover effect to the clinical badges */ .badge.bg-light:hover { background-color: #903665 !important; color: white !important; cursor: default; transition: 0.3s; } /* Color Styling */ .custom-plum-text { color: #903665 !important; } /* Integrated Model Card */ .integrated-model .card { transition: transform 0.4s ease; } .integrated-model .card:hover { transform: translateY(-5px); } /* Icon Styling */ .integrated-model i.fs-1 { opacity: 0.9; } /* Section Text Styling */ .integrated-model .display-6 { letter-spacing: -1px; } /* Responsive adjustment */ @media (max-width: 991px) { .integrated-model .pe-lg-5 { padding-right: 0 !important; margin-bottom: 2rem; } } /* Color Styling */ .custom-plum-text { color: #903665 !important; } .custom-plum-border { border-color: #903665 !important; } /* Regulatory Badge Styling */ .reg-badge { background: #ffffff; border: 1px solid #dee2e6; padding: 15px 5px; text-align: center; border-radius: 8px; font-size: 16px; font-weight: 800; color: #001d3d; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; } .reg-badge:hover { background: #001d3d; color: #ffffff; transform: translateY(-3px); } /* Section Transitions */ .oem-partnerships img { transition: transform 0.5s ease; } .oem-partnerships:hover img { transform: scale(1.02); } @media (max-width: 991px) { .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } } /* Color Styling */ .custom-plum-text { color: #903665 !important; } /* Closing Tag Styling */ .tag-outline { font-size: 0.9rem; font-weight: 700; color: #903665; text-transform: uppercase; letter-spacing: 1.5px; } .tag-dot { width: 6px; height: 6px; background-color: #001d3d; border-radius: 50%; opacity: 0.3; } /* Perspective Section Polish */ .long-term-perspective { border-bottom: 1px solid #eee; } .long-term-perspective .lead { font-size: 1.25rem; } /* Adding a subtle animation to the infinity icon */ .long-term-perspective i.bi-infinity { display: inline-block; animation: pulseIcon 3s ease-in-out infinite; } @keyframes pulseIcon { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .custom-plum-border { border-color: #903665 !important; } /* List Styling */ .custom-check-list li { position: relative; padding-left: 30px; margin-bottom: 15px; font-size: 0.95rem; } .custom-check-list li::before { content: "\F272"; /* Bootstrap Icon Check Circle */ font-family: "bootstrap-icons"; position: absolute; left: 0; color: #903665; font-weight: bold; } /* Typography Helpers */ .x-small { font-size: 0.8rem; } .italic { font-style: italic; } /* Badge Hover */ .badge:hover { background-color: #903665 !important; color: white !important; } /*============================== Quality & Regulatory Page===================================*/ .qms-balanced { padding: 60px 0; background-color: #ffffff; } .peace-badge { color: #903665; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; display: block; margin-bottom: 10px; } .peace-title { color: #001d3d; font-weight: 800; font-size: 2.8rem; margin-bottom: 20px; } .peace-intro { font-size: 1.15rem; /* Your requested size */ color: #5a6b7d; line-height: 1.7; } /* List Styling */ .peace-list { display: flex; flex-direction: column; gap: 20px; } .peace-item { display: flex; align-items: center; gap: 25px; padding: 25px; background: #f9fbfc; border-radius: 20px; transition: all 0.3s ease; border: 1px solid transparent; } .peace-item:hover { background: #ffffff; border-color: #903665; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } .peace-num { font-family: serif; font-style: italic; font-size: 1.6rem; color: #903665; opacity: 0.6; width: 40px; } .peace-text h5 { color: #001d3d; font-weight: 700; margin-bottom: 4px; } .peace-text p { margin-bottom: 0; color: #6c757d; } /* Right Side Visuals */ .peace-visual-container { position: relative; padding: 20px; } .rounded-custom { border-radius: 40px 100px 40px 40px; /* Unique organic shape */ } .shadow-soft { box-shadow: 0 30px 60px rgba(0,29,61,0.1); } .floating-trust-card { position: absolute; bottom: -10px; right: -10px; background: white; padding: 25px; border-radius: 25px; max-width: 250px; display: flex; gap: 15px; border-left: 5px solid #903665; } .floating-trust-card i { font-size: 2rem; color: #903665; } .floating-trust-card p { font-size: 0.9rem; margin-bottom: 0; font-weight: 600; color: #001d3d; } .footer-stat i { color: #903665; } /*============================== End Quality & Regulatory Page===================================*/ /*=================== OEM Partnership Page =============================*/ /* Custom Accents */ .custom-plum-border { border-color: #903665 !important; } .bg-plum-gradient { background: linear-gradient(90deg, #903665 0%, #b04a7e 100%); } /* Card Enhancements */ .network-procurement .card { transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.05) !important; } .network-procurement .card:hover { transform: translateY(-8px); box-shadow: 0 1rem 3rem rgba(144, 54, 101, 0.1) !important; } /* Icon Box Styling */ .icon-box { width: 50px; height: 50px; background: rgba(144, 54, 101, 0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; } /* List Styling */ .custom-list-icons li { position: relative; padding-left: 1.5rem; font-size: 16px; } .custom-list-icons li::before { content: ""; position: absolute; left: 0; color: #903665; font-weight: bold; } .x-small { font-size: 0.82rem; } /* Color Accents */ .custom-plum-text { color: #903665 !important; } .custom-plum-border { border-color: #903665 !important; } .text-plum-italic { color: #903665; font-style: italic; font-weight: 500; } /* Icon Styling */ .icon-circle { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } /* List Styling */ .custom-bullet-list li { position: relative; padding-left: 1.25rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: #495057; } .custom-bullet-list li::before { content: "•"; color: #903665; font-weight: bold; position: absolute; left: 0; } /* Supply Grid Styling */ .supply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .supply-item { background: #fdfdfd; border: 1px solid #f0f0f0; padding: 12px; border-radius: 8px; transition: all 0.2s ease; } .supply-item:hover { border-color: #903665; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } /* Responsive Border */ @media (min-width: 992px) { .border-lg-start { border-left: 1px solid #eee; } } /* Font Size Improvements */ .custom-p-style { font-size: 1.05rem !important; /* Increased by ~1.5px from standard 16px */ color: #555e68; line-height: 1.7; } /* Card Improvements */ .icon-circle { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 1rem 3rem rgba(144, 54, 101, 0.12) !important; } /* List spacing */ .custom-list-icons li { margin-bottom: 0.75rem; } @media (max-width: 768px) { .custom-p-style { font-size: 1rem !important; /* Slightly smaller on mobile for fit */ } } /* Typography - Font Size Increased by 2px */ .custom-p-style { font-size: 1.15rem !important; /* Larger and clearer */ line-height: 1.6; color: #495057; } .custom-plum-text { color: #903665 !important; } .custom-plum-border { border-color: #903665 !important; } /* Section Styling */ .bg-dark { background-color: #001d3d !important; } .italic { font-style: italic; } .py-80 { padding: 80px 0; } /* Image fix */ .object-fit-cover { object-fit: cover; } /* List Style */ .bi-dot { font-size: 2rem; vertical-align: middle; line-height: 0; } .oem_Program ul li{color:#fff;} /* Typography - 2px increase for 'P' tags */ .custom-p-style { font-size: 1rem !important; line-height: 1.6; color: #f1f1f1; } .custom-plum-text { color: #903665 !important; } .custom-plum-border { border-color: #903665 !important; } /* Image and Layout */ .py-80 { padding: 80px 0; } .object-fit-cover { object-fit: cover; } /* Subtle Hover Effect */ .card { transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); } .bg-dark-pink{ background-color: #a7246a !important; } /* Dark Section Enhancements */ .bg-dark { background-color: #001d3d !important; } .border-secondary { border-color: rgba(255, 255, 255, 0.15) !important; } /* Structural Details */ .py-80 { padding: 80px 0; } .italic { font-style: italic; } .object-fit-cover { object-fit: cover; } /* Smooth Card Hover */ .rounded-5 { transition: transform 0.3s ease; } /*=================== End OEM Partnership Page =============================*/ /*=================== Start Manufacturing & Customisation =============================*/ /* Adaptation Section General Styles */ .adaptation-section { padding: 80px 0; background-color: #ffffff; } .section-label { text-transform: uppercase; font-weight: 700; color: #903665; letter-spacing: 2px; font-size: 0.9rem; display: block; margin-bottom: 1rem; } .section-title { color: #001d3d; font-weight: 800; margin-bottom: 1.5rem; font-size: 2.5rem; } .section-intro { font-size: 1.15rem; /* Requested Size */ line-height: 1.7; color: #495057; margin-bottom: 2.5rem; } /* Gallery Styles */ .gallery-img { border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease; } .gallery-img:hover { transform: scale(1.02); } .stability-badge { background-color: #903665; color: #ffffff; padding: 25px; border-radius: 20px; } .stability-badge h6 { font-weight: 700; margin-bottom: 5px; } .stability-badge p { font-size: 0.85rem; opacity: 0.9; margin-bottom: 0; } /* Specification Grid */ .spec-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #dee2e6; } .spec-item { padding: 20px; border-bottom: 1px solid #dee2e6; } .spec-item:nth-child(odd) { border-right: 1px solid #dee2e6; } .spec-label { display: block; font-weight: 700; color: #001d3d; font-size: 1.15rem; /* Requested Size */ } .spec-detail { font-size: 0.95rem; color: #6c757d; } /* Footer Note */ .adaptation-footer { margin-top: -15px; padding: 20px; background-color: rgba(144, 54, 101, 0.04); border-left: 4px solid #903665; border-radius: 4px; } .adaptation-footer p { margin-bottom: 0; font-style: italic; color: #495057; font-size: 1.05rem; } .gallery-img { width: 100%; border-radius: 20px; /* Gives that smooth rounded look in your screenshot */ object-fit: cover; display: block; } .stability-badge { background-color: #903665; /* The Plum color from your screenshot */ color: #ffffff; padding: 25px; border-radius: 20px; } .stability-badge p { font-size: 0.95rem; margin-bottom: 0; opacity: 0.9; } /* Responsive Adjustments */ @media (max-width: 768px) { .spec-grid { grid-template-columns: 1fr; } .spec-item:nth-child(odd) { border-right: none; } } /* Procedure Kit Section Styling */ .kit-configuration-section { padding: 20px 0 60px; background-color: #ffffff; } .kit-label { color: #903665; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; display: block; margin-bottom: 1rem; } .kit-title { color: #001d3d; font-weight: 800; font-size: 2.6rem; margin-bottom: 1.5rem; } .kit-intro { font-size: 1rem; line-height: 1.7; color: #495057; margin-bottom: 2.5rem; } /* Technical Grid */ .kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 2rem; } .kit-item { display: flex; gap: 15px; align-items: flex-start; } .kit-item i { color: #903665; font-size: 1.4rem; background: rgba(144, 54, 101, 0.05); padding: 10px; border-radius: 8px; } .kit-item strong { display: block; color: #001d3d; font-size: 1.05rem; } .kit-item p { font-size: 0.9rem; color: #6c757d; margin-bottom: 0; } /* Image Handling */ .kit-image-wrapper { position: relative; padding: 20px; } .kit-main-img { border-radius: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); } .kit-overlay-card { position: absolute; bottom: -10px; left: -10px; background: white; padding: 25px; border-radius: 20px; max-width: 260px; border-left: 5px solid #903665; } /* Validation Note */ .kit-note { font-size: 0.95rem; color: #495057; padding: 15px 20px; background: #f8f9fa; border-radius: 10px; display: inline-flex; align-items: center; } @media (max-width: 768px) { .kit-grid { grid-template-columns: 1fr; } .kit-title { font-size: 2rem; } } /* ========================== Private Label bottom 2nd section Styling ====================== */ .private-label-section { padding: 50px 0 100px; background-color: #ffffff; } .sub-label { color: #903665; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; display: block; margin-bottom: 1rem; } .main-title { color: #001d3d; font-weight: 800; font-size: 2.5rem; margin-bottom: 1.5rem; } .intro-paragraph { font-size: 1rem; line-height: 1.7; color: #495057; margin-bottom: 2.5rem; } /* Feature Grid */ .label-features { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .feature-box { display: flex; align-items: center; gap: 12px; padding: 20px; background: #fcfcfc; border: 1px solid #f0f0f0; border-radius: 15px; transition: all 0.3s ease; } .feature-box:hover { border-color: #903665; background: white; box-shadow: 0 5px 15px rgba(144, 54, 101, 0.05); } .feature-box i { color: #903665; font-size: 1.3rem; } .feature-box strong { font-size: 1rem; color: #001d3d; } /* Visual Elements */ .branding-visual { position: relative; } .brand-floating-card { position: absolute; top: -20px; right: -20px; background: white; padding: 20px 25px; border-radius: 20px; border-top: 4px solid #903665; } .consistency-seal { padding-top: 20px; border-top: 1px solid #eee; } .consistency-seal p { font-style: italic; color: #6c757d; font-size: 1rem; } .custom-plum-text { color: #903665; } @media (max-width: 768px) { .label-features { grid-template-columns: 1fr; } .brand-floating-card { position: static; margin-top: 20px; } } /* ========================== Private Label bottom 1st section Styling ====================== */ /* Unique Private Label Layout */ .private-label-unique { padding: 100px 0; background-color: #ffffff; } /* Background Image Column */ .bg-image-holder { background-size: cover; background-position: center; position: relative; min-height: 500px; } .image-overlay-text { position: absolute; bottom: 40px; left: 40px; right: 40px; z-index: 2; } .bg-image-holder::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(transparent, rgba(0,29,61,0.8)); } /* Stepped List Design */ .private-label-list { position: relative; padding-left: 5px; } .private-label-list::before { content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background-color: #dee2e6; } .step-dot { width: 10px; height: 10px; background-color: #903665; border-radius: 50%; margin-right: 25px; margin-top: 6px; position: relative; z-index: 1; flex-shrink: 0; } /* Custom Colors & Typography */ .custom-plum-text { color: #903665 !important; } .custom-plum-border { border-color: #903665 !important; } .italic { font-style: italic; } @media (max-width: 991px) { .private-label-unique .row { border-radius: 20px !important; } } /*=================== End Manufacturing & Customisation =============================*/ /*=================== Start Product Category =============================*/ /* Hero Styles */ .category-hero { background-color: #ffffff; } .category-eyebrow { color: #903665; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 10px; display: block; } .category-title { color: #001d3d; font-weight: 800; font-size: 3rem; line-height: 1.2; margin-bottom: 15px; } .category-subtitle { font-size: 1.15rem; color: #272124; font-weight: 600; margin-bottom: 25px; } .category-description { font-size: 16px; /* Requested Font Size */ line-height: 1.8; color: #353a41; margin-bottom: 35px; } /* Focus Box Styling */ .category-focus-box { background: #f8f9fa; padding: 30px; border-radius: 20px; border-left: 5px solid #903665; } .focus-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } .focus-list li { font-size: 16px; color: #001d3d; font-weight: 500; display: flex; align-items: center; gap: 10px; } .focus-list li::before { content: "•"; color: #903665; font-weight: 900; } /* Visual Container (Fills Right Side) */ .category-hero-visual { position: relative; padding-right: 20px; } .rounded-custom { border-radius: 40px 120px 40px 40px; height: 500px; width: 100%; object-fit: cover; } .performance-tag { position: absolute; bottom: -15px; right: 0; background: white; padding: 25px; border-radius: 25px; display: flex; align-items: center; gap: 15px; border-right: 5px solid #001d3d; } /* Product Cards */ .product-card-peaceful { background: white; padding: 35px 25px; border-radius: 20px; border: 1px solid #edf2f7; transition: all 0.3s ease; height: 100%; } .product-card-peaceful:hover { transform: translateY(-8px); border-color: #903665; box-shadow: 0 15px 35px rgba(0,0,0,0.04); } .p-category { font-size: 0.75rem; text-transform: uppercase; color: #903665; font-weight: 800; letter-spacing: 1px; display: block; margin-bottom: 10px; } .product-card-peaceful h5 { font-size: 1.15rem; /* Requested Font Size */ color: #001d3d; font-weight: 700; margin-bottom: 0; } .title-line { width: 60px; height: 4px; background: #903665; border-radius: 2px; } /*=================== EndProduct Category =============================*/ /* ========================== Start Quality and Regulatory page ====================== */ .qms-modern-section { padding: 100px 0; background: radial-gradient(circle at top right, #fdfdfd 0%, #f4f7f9 100%); overflow: hidden; } /* Content Area Styling */ .qms-badge-pill { display: inline-block; padding: 6px 16px; background: rgba(144, 54, 101, 0.1); color: #903665; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; border-radius: 50px; margin-bottom: 20px; } .qms-main-title { font-size: 3rem; font-weight: 800; color: #001d3d; line-height: 1.1; margin-bottom: 25px; } .qms-description { font-size: 1.15rem; color: #5a6b7d; line-height: 1.8; margin-bottom: 40px; } .text-plum { color: #903665; } /* Trust Card Styling */ .qms-trust-card { display: flex; gap: 20px; align-items: center; background: #ffffff; padding: 25px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0, 29, 61, 0.06); border-bottom: 4px solid #903665; } .trust-icon { font-size: 2.5rem; color: #903665; } .qms-trust-card p { margin-bottom: 0; font-weight: 500; color: #001d3d; font-size: 1rem; } /* Process Card Styling */ .qms-process-visual { position: relative; } .qms-feature-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); padding: 30px; border-radius: 24px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 4px 20px rgba(0,0,0,0.03); } .qms-feature-card:hover { transform: translateY(-10px); background: #ffffff; box-shadow: 0 20px 50px rgba(144, 54, 101, 0.08); border-color: #903665; } .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .step-tag { font-size: 0.75rem; font-weight: 800; color: #903665; background: rgba(144, 54, 101, 0.1); padding: 4px 12px; border-radius: 6px; } .card-head i { font-size: 1.5rem; color: #001d3d; opacity: 0.7; } .qms-feature-card h5 { font-weight: 500; color: #001d3d; margin-bottom: 0; font-size: 21px; } /* Footer Bar Styling */ .qms-footer-bar { background: #001d3d; padding: 25px; border-radius: 20px; display: flex; justify-content: space-around; align-items: center; color: white; } .footer-item { display: flex; align-items: center; gap: 15px; font-weight: 600; } .footer-item i { color: #903665; font-size: 1.4rem; } .footer-divider { width: 1px; height: 30px; background: rgba(255,255,255,0.1); } @media (max-width: 768px) { .qms-main-title { font-size: 2.2rem; } .qms-footer-bar { flex-direction: column; gap: 20px; } .footer-divider { display: none; } } /**[===================================== Contact Form Start ====================================/*/ .form-glass-container { background: #ffffff; padding: 50px 40px; border-radius: 40px; box-shadow: 0 40px 80px rgba(0, 29, 61, 0.07); border: 1px solid #f0f0f0; } .form-input-minimal { width: 100%; padding: 15px 0; border: none; border-bottom: 2px solid #edf2f7; background: transparent; outline: none; transition: all 0.3s ease; font-size: 1rem; } .form-input-minimal:focus { border-bottom-color: #903665; } .select-custom { color: #6c757d; cursor: pointer; } .btn-submit-plum { background: #903665; color: white; width: 100%; padding: 16px; border: none; border-radius: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; margin-top: 10px; } .btn-submit-plum:hover { background: #001d3d; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(144, 54, 101, 0.2); } /* --- Content Styling --- */ .badge-plum { background: rgba(144, 54, 101, 0.1); color: #903665; padding: 6px 15px; border-radius: 50px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; } .partnership-highlight { background: #f8faff; border-radius: 30px; border: 1px dashed rgba(144, 54, 101, 0.3); } .collab-tag { background: #ffffff; padding: 10px 15px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; color: #001d3d; border: 1px solid #eef2f6; height: 100%; display: flex; align-items: center; } .collab-tag::before { content: "•"; color: #903665; margin-right: 10px; font-weight: bold; } .hours-strip { background: #141a49; color: white; padding: 20px 30px; border-radius: 20px; font-size: 0.95rem; } .contact-item strong { font-size: 0.9rem; color: #001d3d; } .tracking-wider { letter-spacing: 1.5px; } @media (max-width: 768px) { .form-glass-container { padding: 30px 20px; } } .contact-form-card { background: #ffffff; border-radius: 30px; padding: 50px; border: 1px solid #f0f0f0; border-top: 6px solid #7b2c5a; } .custom-input { border: 2px solid #f0f0f0; border-radius: 12px; padding: 12px 15px; transition: all 0.3s ease; background: #fdfdfd; } .custom-input:focus { border-color: #903665; box-shadow: none; background: #fff; } .btn-plum { background: #903665; color: white; border-radius: 12px; transition: all 0.3s ease; } .btn-plum:hover { background: #001d3d; transform: translateY(-3px); } /* --- Content Styling --- */ .badge-plum { background: rgba(144, 54, 101, 0.1); color: #903665; padding: 6px 15px; border-radius: 50px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; } .partnership-highlight { background: #f8faff; border-radius: 30px; border: 1px dashed rgba(144, 54, 101, 0.3); } .collab-tag { background: #ffffff; padding: 10px 15px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; color: #001d3d; border: 1px solid #eef2f6; height: 100%; display: flex; align-items: center; } .collab-tag::before { content: ""; color: #903665; margin-right: 10px; font-weight: bold; } .hours-strip { background: #7a2b5a; color: #ffffff; padding: 20px 30px; border-radius: 20px; font-size: 0.95rem; border: 1px solid #cbc9ca; } .contact-item strong { font-size: 0.9rem; color: #001d3d; } .tracking-wider { letter-spacing: 1.5px; } @media (max-width: 768px) { .form-glass-container { padding: 30px 20px; } } /**======================================== ENd Contact Form ===============================================/*/ /*==================================== Start Career page ===========================================*/ .tracking-wider { letter-spacing: 2px; } .work-env{ padding-top:50px; padding-bottom:80px; } .title-line { width: 60px; height: 4px; background: #903665; border-radius: 2px; } /* Environment Cards */ .env-card { background: #f8f9fa; padding: 40px 30px; border-radius: 30px; border: 1px solid #f0f0f0; transition: all 0.3s ease; height: 100%; } .env-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); } /* Opportunity List */ .opp-list { list-style: none; padding: 0; } .opp-list li { font-size: 1.15rem; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); } /* Apply Box */ .apply-box { background: #ffffff; padding: 50px; border-radius: 40px; } .email-apply-card { display: flex; align-items: center; gap: 20px; background: #f8f9fa; padding: 25px; border-radius: 20px; border: 1px dashed #903665; } .x-small { font-size: 0.75rem; } .italic { font-style: italic; } .opp-list li{ color: rgba(255, 255, 255, .5) !important; } .opp-list li i{ color: rgba(255, 255, 255, .5) !important; } @media (max-width: 991px) { .careers-hero { text-align: center; } .apply-box { margin-top: 40px; padding: 30px; } } /*==================================== End Career page ===========================================*/ .fs-5{ font-size:16px !important; } /* Regulatory Section Styles */ .regulatory-modern { padding: 100px 0; background-color: #ffffff; } .reg-eyebrow { color: #903665; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 1rem; font-size: 0.9rem; } .reg-heading { color: #001d3d; font-weight: 800; font-size: 2.8rem; margin-bottom: 1.5rem; } .reg-lead { font-size: 1.15rem; /* Requested Font Size */ line-height: 1.7; color: #495057; margin-bottom: 2.5rem; } /* Compliance List - Minimalist Style */ .compliance-list { display: flex; flex-direction: column; gap: 12px; } .compliance-row { display: flex; align-items: center; gap: 15px; padding: 18px 25px; background: #fcfcfc; border: 1px solid #f0f0f0; border-radius: 12px; font-size: 1.15rem; /* Requested Font Size */ font-weight: 600; color: #001d3d; transition: all 0.3s ease; } .compliance-row i { color: #903665; font-size: 1.4rem; } .compliance-row:hover { border-color: #903665; background: #ffffff; box-shadow: 0 5px 15px rgba(144, 54, 101, 0.05); } /* Footer Documentation Box */ .reg-footer-note { padding: 20px; background-color: #f8f9fa; border-radius: 10px; border-left: 4px solid #001d3d; } .reg-footer-note p { margin-bottom: 0; font-style: italic; color: #6c757d; } /* Image Wrapper and Overlay */ .reg-image-container { position: relative; } .reg-image-container img { width: 100%; height: 550px; object-fit: cover; border-radius: 40px; } .reg-image-overlay { position: absolute; bottom: 30px; left: 30px; background: rgba(0, 29, 61, 0.85); padding: 15px 25px; border-radius: 12px; backdrop-filter: blur(5px); } .pulse-dot { width: 10px; height: 10px; background-color: #903665; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(144, 54, 101, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(144, 54, 101, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(144, 54, 101, 0); } } @media (max-width: 768px) { .reg-heading { font-size: 2.2rem; } .reg-image-container img { height: 350px; } } /* Section Container */ .validation-section { background-color: #ffffff; padding: 90px 0; } /* Left Column: Index Cards */ .validation-index { display: flex; flex-direction: column; gap: 15px; } .index-card { background: #f8f9fa; padding: 20px 25px; border-radius: 15px; display: flex; align-items: center; gap: 20px; border: 1px solid transparent; transition: all 0.3s ease; } .index-card:hover { border-color: #903665; background: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .index-num { font-size: 0.85rem; font-weight: 800; color: #903665; background: rgba(144, 54, 101, 0.1); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; } .index-label { font-weight: 600; color: #001d3d; font-size: 1.1rem; } /* Right Column: Content */ .validation-label { color: #903665; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 10px; font-size: 0.9rem; } .validation-title { color: #001d3d; font-weight: 800; font-size: 2.6rem; margin-bottom: 20px; } .validation-text { font-size: 1.15rem !important; /* Requested Size */ line-height: 1.7; color: #495057; margin-bottom: 30px; } .validation-img-box img { width: 100%; height: 320px; object-fit: cover; border-radius: 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .validation-summary { padding: 20px; background-color: #fcfcfc; border-left: 4px solid #903665; border-radius: 0 12px 12px 0; } .validation-summary p { font-size: 1.15rem !important; /* Requested Size */ margin-bottom: 0; color: #495057; font-style: italic; } @media (max-width: 991px) { .validation-title { font-size: 2rem; } } /* Layout Spacing */ .py-80 { padding: 80px 0; } /* Traceability Section */ .trace-bg-image { background-image: url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1000&q=80'); background-size: cover; background-position: center; height: 100%; position: relative; min-height: 500px; } .trace-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 29, 61, 0.9)); } /* Vertical Numbered List */ .trace-list { border-left: 1px solid #dee2e6; } .trace-item { padding: 15px 25px; font-size: 1.15rem; font-weight: 600; color: #001d3d; position: relative; } .trace-item span { color: #903665; font-size: 0.8rem; font-weight: 800; margin-right: 15px; } /* Audit Cards */ .audit-card { transition: all 0.3s ease; } .audit-card:hover { border-color: #903665 !important; box-shadow: 0 10px 30px rgba(144, 54, 101, 0.05); } /* Helpers */ .text-plum { color: #903665; } .border-plum { border-color: #903665 !important; } .tracking-wider { letter-spacing: 2px; } .italic { font-style: italic; } /* Premium Compliance Section */ .premium-compliance-section { padding: 60px 0; background-color: #ffffff; overflow: hidden; } .p-eyebrow { color: #903665; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: 0.85rem; display: block; margin-bottom: 1rem; } .p-title { color: #001d3d; font-weight: 800; font-size: 2.8rem; margin-bottom: 1.5rem; } .p-lead { font-size: 1.15rem !important; /* Requested Size */ line-height: 1.8; color: #495057; margin-bottom: 2.5rem; } /* Numbered Index Design */ .p-index-stack { display: flex; flex-direction: column; gap: 10px; } .p-index-row { display: flex; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid #f0f0f0; transition: all 0.3s ease; } .p-index-row:hover { padding-left: 10px; border-bottom-color: #903665; } .p-num { font-size: 0.8rem; font-weight: 800; color: #903665; background: rgba(144, 54, 101, 0.08); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .p-label { font-weight: 700; color: #001d3d; font-size: 1.15rem; /* Requested Size */ } /* Mosaic & Image Stacking */ .mosaic-container { position: relative; padding: 40px; } .mosaic-main-img img { border-radius: 50px; width: 100%; height: 500px; object-fit: cover; } .mosaic-floating-card { position: absolute; bottom: -20px; left: -10%; background: #ffffff; border-radius: 30px; max-width: 320px; border-left: 6px solid #903665; } .badge-pill { background: #f8f9fa; color: #903665; padding: 6px 15px; border-radius: 50px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; } /* Bottom Stripe */ .summary-stripe { background-color: #001d3d; color: #ffffff; padding: 30px 50px; border-radius: 20px; text-align: center; } .summary-stripe p { font-size: 1.1rem; margin-bottom: 0; font-style: italic; opacity: 0.9; } .text-plum { color: #903665; } /* Responsive Adjustments */ @media (max-width: 991px) { .p-title { font-size: 2.2rem; } .mosaic-floating-card { position: static; margin-top: 30px; max-width: 100%; } } /* ========================== End Quality and Regulatory page ====================== */ /* Image Handling */ .object-fit-cover { object-fit: cover; } /* Card Hover Effect */ .distribution-ops .card { transition: all 0.3s ease; } .distribution-ops .card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; } /* Mobile Image Adjustments */ @media (max-width: 767px) { .distribution-ops img { height: 180px !important; } } /* BREAKING THE GRID */ .main-img-wrap { transform: perspective(1000px) rotateY(-5deg); /* Subtle 3D tilt */ transition: transform 0.5s ease; } .main-img-wrap:hover { transform: perspective(1000px) rotateY(0deg); } .detail-img-wrap { animation: floatDetail 4s ease-in-out infinite; } @keyframes floatDetail { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } /* TYPOGRAPHY */ .display-5 { letter-spacing: -2px; } .tracking-wider { letter-spacing: 1px; } .content-box { margin-left: -30px; /* Overlaps slightly onto the image on large screens */ position: relative; z-index: 5; } @media (max-width: 991px) { .main-img-wrap { transform: none; } .content-box { margin-left: 0; } .detail-img-wrap { display: none; } } .py-40{ padding:40px 0 !important; } .py-50{ padding:50px 0 !important; } .py-60{ padding:60px 0 !important; } .py-70{ padding:70px 0 !important; } .py-80{ padding:80px 0 !important; } .service-section{ padding: 80px 0 70px !important; } .service-section::before { content: ""; position: absolute; left: 10%; right: auto; top: 0; width: 80%; height: 100%; background: var(--themeht-bg-light-color); margin: 0 auto; z-index: -1; border-radius: 24px; /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }*/ } .bg-img9 { /*background-image: url(../images/bg/row-bgimage-9.png);*/ /*background-size: cover;*/ /*background-repeat: no-repeat;*/ /*background-position: center;*/ } .bg-img9 .elements9 { position: absolute; top: -6%;; height: 100%; -o-object-fit: cover; object-fit: cover; width: 50%; z-index: -1; } .about-img-1{ width: 100%; } .about-img-1 img{ border-radius: 5px; position: relative; } .about-img-1 img::after{ content: " "; width: 100%; Height: 100%; background: var(--themeht-primary-color); border-radius: 30px; position: absolute; top: 20px; left: -20px; } .about-img-shape { width: 550px; height: 550px; background-size: cover; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); } .about-img-shape-small { width: 200px; height: 200px; background-size: cover; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); position: absolute; right: 1%; bottom: 5%; } .about-counter { background-color: var(--themeht-primary-color); display: flex; align-items: center; justify-content: center; text-align: center; width: 200px; height: 200px; background-size: cover; clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%); } .about-counter .counter{ padding: 0 50px; } .position-set{ top: 3%; left: -13%; } .qty_regulatory{ /*margin-top:60px;*/ margin-bottom: 80px; } .about-counter .counter span { font-size: 40px; font-weight: 700; line-height: 40px; color: var(--themeht-white-color); display: inline-block; } .about-counter .counter h6 { color: var(--themeht-white-color); margin: 5px 0 0; font-weight: 600; font-size: 16px; line-height: 22px; } .working-hours-item { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 0 9px; position: relative; } .primary-bg .working-hours-item { color: var(--themeht-white-color); } .about1-img-shape{clip-path: polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)} .about1-img-shape img{ background: #f4f4f4; } .contact-max-height{ min-height: 230px; } .page-breadcrumb{ display:none; } .home_page header{ position:absolute; background: transparent; } .home_page .navbar-nav .nav-link{ color:#fff; } .home_page .navbar-nav .nav-link:hover,.home_page .navbar-nav .nav-item .nav-link.active{ color:#fff; } .home_page .banner-1{ padding-top:0px; } .home_page .fixed-header .navbar-nav .nav-link:hover,.home_page .fixed-header .navbar-nav .nav-item .nav-link.active{ color:#000; } .home_page .fixed-header .navbar-nav .nav-link{ color:#000; } .fixed-header .navbar-brand.logo img{ filter:inherit !important; } .cate-body{ background-color: #f8f9fa; } .border-start{ border-left: 4px solid #7b2c5a !important; } /* ALSPL Brand Colors */ .brand-plum { background-color: #dedede !important; } .text-plum { color: #7b2c5a !important; } .btn-plum { background-color: #7b2c5a; color: white; border-radius: 12px; padding: 12px 24px; transition: all 0.3s; } .btn-plum:hover { background-color: #5e2145; color: white; } /* Custom Hover Effects */ .product-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid #eee; border-radius: 1.25rem; background: white; height: 100%; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); } /* Hero Section */ .hero-section { position: relative; padding: 100px 0; background: linear-gradient(to right, rgba(123, 44, 90, 0.9), rgba(0, 0, 0, 0.7)), url('../images/bg/bg-cate.webp'); background-size: cover; background-position: center; color: white; } .hero-sectionss { position: relative; padding: 80px 0; background: url(../images/bg/banner-small.jpg); background-size: cover; background-position: bottom; } .hero-sectionss h2{ font-size: 50px; color: #8b2c5f; } .thumb{ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } .badge-outline { border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); padding: 5px 15px; letter-spacing: 2px; font-size: 0.7rem; } .img-container { height: 200px; overflow: hidden; border-radius: 12px; background: #f8f9fa; } .img-container img { width: 80%; height: 100%; object-fit: cover; } .procedure-kit-banner { background-color: #7b2c5a; border-radius: 2rem; overflow: hidden; border: 4px solid rgba(123, 44, 90, 0.1); } .shadow-inner{ box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); background: rgb(243 244 246); border-radius: 6px; padding: 100px 150px; } .key-point{ display: flex; margin: 20px 0; } .key-pt-ctn{ display: flex; width: 100%; border: 1px solid #ccc; padding: 12px; justify-content: space-between; align-items: center; } .key-pt-ctn p{ margin-bottom: 0px; } body { background-color: #fff; color: #2d3748; } /* Technical Header */ .tech-header { border-bottom: 3px solid var(--brand-maroon); padding: 40px 0; background: var(--bg-light); } .product-id { font-family: monospace; color: var(--brand-maroon); font-weight: bold; } /* Section Styling */ .section-title { font-size: 17px; font-weight: 800; /* text-transform: uppercase; */ letter-spacing: 1.5px; color: #000812; margin-bottom: 1.5rem; display: flex; align-items: center; } .section-title::after { content: ""; flex: 1; height: 1px; background: #eee; margin-left: 15px; } /* Specification Table */ .table-spec { border: 1px solid #e2e8f0; font-size: 0.95rem; } .table-spec thead { background-color: #f8fafc; color: var(--tech-gray); } .table-spec th { font-weight: 800; border-bottom: 2px solid #edf2f7; } /* Info Cards */ .info-box { border-left: 4px solid var(--brand-maroon); padding: 20px; } /* Buttons */ .btn-tech { background: var(--brand-maroon); color: white; border-radius: 0; font-weight: 600; padding: 12px 25px; border: none; } .btn-tech-outline { border: 1px solid var(--brand-maroon); color: var(--brand-maroon); border-radius: 0; font-weight: 600; padding: 12px 25px; } .btn-tech:hover { background: #6b1841; color: white; } .btn-tech-outline:hover{ background: var(--brand-maroon); color: white; } .sticky-sidebar { position: -webkit-sticky; position: sticky; top: 100px; z-index: 10; } .feature-card { transition: all 0.3s ease-in-out; border: 1px solid rgba(0,0,0,0.05); border-bottom: 4px solid transparent; } .feature-card:hover { transform: translateY(-10px); border-bottom: 4px solid #8b2c5f; box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .icon-box { width: 60px; height: 60px; background: rgba(138, 51, 97, 0.1); color: #8b2c5f; display: flex; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 1.5rem; } .icon-box i{ color: #8b2c5f; } .section-title::after { content: ""; display: block; width: 60px; height: 3px; background: var(--alspl-purple); margin: 15px auto; } .experience-text { border-left: 4px solid var(--brand-primary); padding-left: 20px; font-style: italic; } /* Specialty Badges */ .specialty-badge { background-color: var(--brand-light); color: var(--brand-primary); border: 1px solid rgba(138, 51, 97, 0.2); padding: 10px 24px; border-radius: 50px; display: inline-block; font-weight: 600; margin: 5px; transition: all 0.3s ease; cursor: default; } .specialty-badge:hover { background-color: var(--brand-primary); color: white; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(138, 51, 97, 0.3); } .services-footer { font-weight: 700; color: #444; letter-spacing: 1px; } .bg-brand-plum { background-color: #7b2c5a !important; } .text-brand-plum { color: #7b2c5a !important; } .rounded-4xl { border-radius: 3rem; } .tracking-tighter { letter-spacing: -0.05em; } .text-brand-plum { color: #fefefe !important; font-size: 40px; font-weight: 800; } .shadow-inner-custom { box-shadow: inset 0 2px 15px rgba(0,0,0,0.05); } .part-width{ width: 60%; } .roung-bg{ background: #b4799a; border-radius: 50px; padding: 7px 15px; margin: 0 12px 15px; width: 146px; text-align: center; } .last-para{ margin: auto; width: 55%; background: #f8f9fa; padding: 40px 40px 30px; border-radius: 3rem; } .last-para h4{ color: #8b2c5f; font-size: 24px; font-weight: 800; } .text-style{ font-size: 42px; opacity: 0.4; font-weight: 900; text-align: end; } .qlts-box{ padding: 24px; background: #fff; border-radius: 12px; border-top: 8px solid #8b2c5f; } .wth{ width: 90%; } .partners{ /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);*/ padding: 30px; } .border_bottom{ border-bottom: 40px solid #8b2c5f; } .price-content h4{ font-size: 21px; line-height: 20px; font-weight: 700; } .height_fixed{ min-height: 285px; } .whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 20px; /* Distance from bottom */ left: 20px; /* Distance from left */ background-color: #25d366; border-radius: 50px; text-align: center; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; /* Ensures it stays on top of other elements */ display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .whatsapp-float img { width: 35px; height: 35px; } /* Hover effect for a little extra polish */ .whatsapp-float:hover { transform: scale(1.1); background-color: #128c7e; } .vect{ position: absolute; right: -60px; top: 46px; width: 286px; } /* Card container styling */ .custom-card { border-radius: 12px; background: #ffffff5c !important; border: 1px solid #e4e3e3 !important; } /* Rounded image styling */ .custom-card .card-img-top { height: 220px; object-fit: cover; border-radius: 12px !important; } /* Floating Icon Badge */ .icon-badge { position: absolute; bottom: -25px; /* Overlaps onto the card body */ left: 50%; transform: translateX(-50%); background: #fff; width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; border: 1px solid #eee; } .icon-badge i { font-size: 1.4rem; color: #333; } /* Card Body Text */ .custom-card .card-body h5 { font-size: 1.15rem; margin-bottom: 0.5rem; } .custom-card .card-body p { line-height: 1.4; } .banner-text .themeht-btn.dark-btn{ margin-left:0 !important; } /* Responsive adjustments */ @media (max-width: 768px) { .custom-card .card-img-top { height: 180px; } } .img_card{ /*overflow: hidden;*/ border-radius: 10px; } .img_card:before{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; /*background: #3b162a59;*/ /*background:#383d4040;*/ right: 0; z-index: 1; bottom: 0; border-radius: 10px; } .therapy-areas{ padding:100px 0; } #dynamic-medical-section ul li i{ color:#fff !important; } .medical-col { transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); } .medical-col .card img { transition: transform 0.8s ease; } .medical-col:hover .card img { transform: scale(1.05); } /* Hide long text when card is small on Desktop */ @media (min-width: 992px) { .medical-col:not(.active-col) .text-white-50 { opacity: 0.6; } } .right { position: relative; } .right span { position: absolute; font-size: 12px; font-weight: bold; color: #8b2c5f; } .d-none{ display:none !important; } @media (min-width: 768px) and (max-width: 992px) { .banner-1 h1{ font-size: 36px; line-height: 50px; } .banner-1 .carousel-inner, .banner-1 .carousel-item, .banner-1 .banner-bg { height: 670px; } h2, .h2 { font-size: 34px !important; line-height: 48px !important; } .nav-item.d-none{ display:block !important; } } @media (max-width: 992px) { .navbar-nav a{ color:#000 !important; } .nav-item.d-none{ display:block !important; } } @media(max-width: 767px){ .navbar-nav a{ color:#000 !important; } .banner-1 .carousel-inner, .banner-1 .carousel-item, .banner-1 .banner-bg{ height:650px !important; } .banner-content{ padding-top: 130px !important; } .page-wrapper{ /*display: none;*/ } .banner-1 br{ display:none; } .banner-1 h6{ font-size:13px !important; } .banner-1 h1{ font-size: 30px !important; line-height: 40px !important; } .services-inn-sec { padding: 0px; text-align: center; } .colss-bot::before{ display: none; } .who-img-wdt { width: 94%; box-shadow: rgb(231, 231, 231) 0px 0px 9px 0px; border-radius: 5px; position: relative; left: 20px; top: -40px; } .qlt-box{ padding: 0 25px !important; } .qlt-box .row{ padding: 40px 5px; } .hero-sectionss { padding: 60px 0; } .hero-sectionss h2 { font-size: 32px; } .who-img-wdts { left: 17px; top: -30px; } .part-width { width: 100%; } .last-para { width: 100%; padding: 40px 20px 30px; } .last-para h4 { color: #8b2c5f; font-size: 20px; font-weight: 800; } .height_fixed{ min-height: 100%; } }