body,
html {
font-family: "Poppins", sans-serif;
overflow-x: hidden;
/* overflow-y: hidden; */
}
.container-fluid {
/* max-width: 1500px; */
/* margin: 0 auto; */
}
/* ---------------------- */ /* GLOBAL STYLES */ /* ---------------------- */
.navbar-section {
position: fixed;
top: 0;
z-index: 99;
width: 100%;
background: #600404;
}
.navbar-section .nav-link,
.navbar-section .navbar-brand,
.navbar-section .dropdown-toggle {
color: #fff !important;
}
.sanitize {
margin-left: -3px !important;
}
/* Base styles — add transition here */
.navbar-section .nav-link,
.navbar-section .navbar-brand,
.navbar-section .dropdown-toggle {
transition: color 0.3s ease, font-weight 0.3s ease;
}
.navbar-section .nav-link:hover,
.navbar-section .navbar-brand:hover,
.navbar-section .dropdown-toggle:hover {
/* color: #ffc107 !important; */
color: #fff;
font-weight: 700;
/* text-decoration: underline; */
} /* Dropdown default (desktop view) */
.navbar-section .dropdown-menu {
/* background-color: #861818; */
background-color: #fff;
border: none;
}
.navbar-section .dropdown-item {
color: #600404 !important;
}
.navbar-section .dropdown-item:hover {
background-color: #600404;
color: #fff !important;
} /* Logo + Vector */
.navbar-logo-wrapper {
background-image: url(../images/Navbar/Vector-1.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
/* width: 296px; */
width: 288px;
height: 185px;
padding: 0;
margin-right: 1rem;
}
.navbar-logo {
width: 71%;
/* margin-top: 85px; */
margin-left: -26px;
} /* Navbar adjustments */
.nav-item {
margin-right: 0.5rem;
}
.navbar {
padding: 0;
height: 107px;
}
.navbar-toggler {
border: none;
padding: 0.25rem 0.5rem;
}
.navbar-toggler-icon {
background-image: none;
}
.navbar-toggler i {
font-size: 1.5rem;
color: white;
} /* Icon container */
.icons-wrapper {
display: flex;
align-items: center;
gap: 1rem;
margin-right: 75px;
}
.custom-contact-btn {
color: #600404;
background-color: #f8f9fa;
transition: all 0.3s ease;
border: 1px solid #600404;
font-weight: 600;
font-family: "Poppins", sans-serif;
}
.custom-contact-btn:hover {
background-color: #600404;
color: #ffffff !important;
} /* ---------------------- */ /* MOBILE STYLES */ /* ---------------------- */
@media (max-width: 991.98px) {
.navbar-collapse {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
background-color: #fff;
padding: 1rem;
z-index: 999;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
overflow: scroll;
height: 80vh;
}
.navbar-logo {
/* width: 80%; */
/* margin-top: 77px; */
}
.navbar-logo-wrapper {
margin-top: -38px;
}
.navbar-collapse .nav-link,
.navbar-collapse .dropdown-toggle,
.navbar-collapse .dropdown-item {
color: #600404 !important;
}
.navbar-collapse .nav-link:hover,
.navbar-collapse .dropdown-item:hover {
color: #fff !important;
background-color: #600404;
}
.navbar-collapse .dropdown-menu {
background-color: #fff !important;
box-shadow: none;
padding: 0;
border: none;
}
.navbar-collapse .dropdown-menu .dropdown-item {
color: #600404 !important;
}
.navbar-collapse .dropdown-menu .dropdown-item:hover {
background-color: #600404;
color: #fff !important;
}
.mobile-hr {
border: none;
border-top: 1px solid #d9a3a3;
margin: 0.5rem 0;
}
.icons-wrapper {
justify-content: flex-start;
margin-top: 1rem;
gap: 1rem;
flex-wrap: wrap;
}
.icons-wrapper i {
color: #600404 !important;
}
.icons-wrapper a.btn {
background-color: #600404 !important;
color: #fff !important;
border: none;
margin-top: 0.5rem;
}
.icons-wrapper a.btn i {
color: #fff !important;
}
.icons-wrapper a.btn:hover {
background-color: #861818 !important;
color: #fff !important;
}
.icons-wrapper a.btn:hover i {
color: #fff !important;
}
}
@supports not (position: sticky) {
.navbar-section {
position: fixed;
}
}
/* ----------------------------Navbar End-------------------------------------- */ /* ----------------------------Home Start------------------------------------- */
.home {
position: relative;
}
.vector-overlay-group {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 10px;
padding-left: 10px;
pointer-events: none;
overflow: hidden;
} /* Individual vector styles */
.vector-img {
/* max-height: 33.33%; */
width: auto;
object-fit: contain;
}
.vector-1 {
width: 605px;
height: 665px;
position: absolute;
top: 0px;
left: -65px;
opacity: 0.6;
} /* @keyframes slideInLeft { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 0.6; }}@keyframes slideInTop { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 0.6; }} */
.vector-2 {
/* animation: slideInTop 0.8s ease-out; */
margin-left: 80px;
width: 427px;
position: absolute;
top: 0;
left: 50px;
opacity: 0.6;
}
.vector-1 {
/* animation: slideInLeft 0.6s ease-out; */
}
.vector-2 {
/* animation: slideInTop 0.8s ease-out; */
margin-left: 40px;
width: 427px;
}
.vector-3 {
/* animation: slideInLeft 1s ease-out; animation: slideInLeft 1s ease-out; */
margin-left: 291px;
width: 263px; /* top: 86px; */
margin-top: 0px;
height: 535px;
z-index: 99;
}
@media (max-width: 768px) {
.vector-1 {
height: 98% !important;
/* top: 3vh; */
/* left: -8vw; */
height: 333px;
margin-left: -183px;
margin-top: 49px;
}
.vector-2 {
width: 45vw;
top: 6vh;
left: 5vw;
}
}
@media (max-width: 480px) {
.vector-1 {
height: 99% !important;
top: 5% !important;
left: -10% !important;
}
.vector-2 {
height: 60% !important;
top: 6%;
left: 5%;
margin-left: -49px !important;
}
.vector-3 {
height: 35%;
top: 8%;
left: 10%;
}
} /* ------------------------About----------------------------------- */
.facility-section {
padding: 60px 0;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
overflow-y: scroll;
max-width: 1140px; /* Bootstrap container-lg */
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
/* @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); }}@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); }} */
.section-title {
color: #600404;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 50px;
line-height: 70px;
text-align: left;
margin-top: 0px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.section-title-h4 {
color: #600404;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 75px;
text-align: left;
margin-left: -100px; /* animation: slideInLeft 1.5s ease-out forwards; */
}
.section-title-2 {
display: flex;
justify-content: flex-start;
}
.who-we-are-title {
color: #600404;
margin: 0; /* optional, removes default h3 margin */
margin-left: -100px;
font-weight: 600;
}
.bullet-list {
list-style: none; /* Remove default bullets */
padding-left: 0;
margin: 0;
}
.bullet-list li {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
color: #333; /* Adjust text color */
font-size: 20px;
}
.check-icon {
color: #600404; /* Check icon color */
margin-right: 10px;
margin-top: 3px;
}
.section-description {
/* width: 804px; */
margin-left: -100px;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: #333;
text-align: justify;
/* animation: slideInRight 1.5s ease-out forwards; */
}
@media (max-width: 768px) {
.facility-section {
margin: 0px 0px;
}
.section-title {
font-size: 36px;
line-height: 48px;
margin-left: 0;
text-align: center;
}
.section-title-h4 {
font-size: 28px;
line-height: 38px;
margin-left: 0;
text-align: center;
}
.section-title-2 {
justify-content: center;
font-size: 28px !important;
}
.service-hover-text h3 {
margin: 0;
font-size: 33px !important;
/* line-height: 1.4; */
margin-top: 8px !important;
}
.who-we-are-title {
margin-left: 0;
text-align: center;
font-size: 24px;
}
.section-description {
width: 100%;
margin-left: 0;
font-size: 16px;
text-align: left;
padding: 0 15px;
}
.bullet-list {
padding-left: 15px;
}
.btn-dark-red {
display: block;
width: fit-content;
margin: 20px auto 0 auto;
}
}
.btn-dark-red {
background-color: #7b0f11;
color: #fff;
border-radius: 60px;
padding: 15px 53px;
text-decoration: none;
border: none;
margin-left: -15px;
font-weight: 700;
width: 200px;
font-size: 19px;
}
.btn-dark-red:hover {
background-color: #fff;
font-weight: 400;
color: #600404;
border: 1px solid #600404;
transition: background-color 0.3s ease, color 0.3s ease;
}
@media (max-width: 992px) {
.facility-section {
margin: 0px 0px;
}
.section-title {
font-size: 40px;
line-height: 55px;
text-align: center;
}
.section-description {
font-size: 16px;
/* text-align: justify; */
text-align: center;
width: 90%;
margin: 10px;
}
.btn-dark-red {
display: block;
margin: 0 auto;
width: 200px;
}
}
@media (max-width: 576px) {
.section-title {
font-size: 32px;
line-height: 45px;
}
.section-description {
font-size: 18px;
}
}
/* ---------------------------facility section ----------------------------------------- */
.facility-section1.slider {
overflow: hidden;
background-color: #600404;
color: #fff;
padding: 40px 0;
}
.wrapper {
width: 100%;
overflow: hidden;
margin-top: 100px;
}
.photobanner {
display: flex;
width: max-content;
animation: scroll-left 40s linear infinite;
}
.photobanner img {
margin-right: 30px;
object-fit: contain;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
.photobanner::after {
content: "";
display: flex;
}
.photobanner:hover {
animation-play-state: paused;
}
h2 {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 58px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
margin-top: 40px;
}
.photo-card {
position: relative;
margin-right: 30px;
overflow: hidden; /* border-radius: 20px; */
width: 400px;
flex-shrink: 0;
margin-bottom: 40px;
}
.photo-card img {
width: 100%;
height: auto;
display: block; /* border-radius: 20px; */
}
.photo-label {
position: absolute;
bottom: 0;
left: 0;
width: 88%;
height: 63px;
background: white;
color: black;
padding: 10px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 16px;
text-align: center;
margin-right: 78px;
border-top-right-radius: 20px;
display: flex;
align-items: center;
justify-content: center; /* border-bottom-left-radius: 20px; */ /* border-bottom-right-radius: 20px; */
}
@media (max-width: 768px) {
h2 {
font-size: 32px;
margin-top: 20px;
}
.photo-card {
width: 260px; /* reduce card width */
margin-right: 20px;
margin-bottom: 20px;
}
.photo-label {
width: 90%;
height: auto;
font-size: 14px;
padding: 8px;
line-height: 1.2;
border-top-right-radius: 15px;
}
.photobanner img {
margin-right: 20px;
}
}
@media (max-width: 480px) {
h2 {
font-size: 26px;
text-align: center;
}
.photo-card {
width: 220px;
margin-right: 15px;
}
.photo-label {
font-size: 13px;
padding: 6px;
width: 92%;
}
.wrapper {
margin-top: 60px;
}
} /* */
.section-title-manpower {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: clamp(28px, 5vw, 52px);
color: #600404;
line-height: 1.2;
white-space: nowrap;
letter-spacing: 0;
margin-right: 13vw !important;
margin-top: 50px;
}
.section-description-manpower {
font-family: "Poppins", sans-serif; /* font-size: clamp(16px, 2vw, 24px); */
font-size: 22px;
color: #222;
line-height: 1.6;
padding: 1rem;
}
.service-card {
position: relative;
overflow: hidden;
}
.service-hover-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 16px;
text-align: center;
padding: 0 20px;
opacity: 0;
transition: opacity 0.4s ease-in-out;
z-index: 2;
width: 100%;
}
.service-hover-text .text-inline {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.service-hover-text h3,
.service-hover-text p {
margin: 0;
font-size: 14px;
line-height: 1.4;
color: #fff;
}
.service-card:hover .service-hover-text {
opacity: 1;
padding: 20px;
}
.service-card img {
width: 100%;
height: auto;
display: block;
}
.service-label,
.service-label-1,
.service-label-2 {
background-color: #600404;
color: white;
padding: 10px;
font-family: "Poppins", sans-serif;
font-size: 15px;
text-align: center;
position: relative;
}
.service-label-1 {
border-bottom-left-radius: 40px;
margin-top: -42px;
}
.service-label-2 {
border-bottom-right-radius: 40px;
margin-top: -42px;
}
.service-card.rounded-left img {
border-bottom-left-radius: 40px;
}
.service-card.rounded-right img {
border-top-right-radius: 20px;
} /* Overlay background */
.service-card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(96, 4, 4, 0.85); /* dark red overlay */
opacity: 0;
transition: opacity 0.4s ease-in-out;
z-index: 1;
}
.service-card .service-hover-text {
position: absolute;
top: 50%;
left: 47%;
right: -50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 18px;
text-align: center;
padding: 0 20px;
opacity: 0;
transition: opacity 0.4s ease-in-out;
z-index: 2;
display: inline-block;
}
.service-hover-text .text-inline {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
justify-content: center;
flex-wrap: wrap; /* Optional: wraps on smaller screens */
}
.service-hover-text h3 {
margin: 0;
font-size: 48px; /* line-height: 1.4; */
margin-top: -118px;
}
.service-hover-text p {
margin: 0;
font-size: 22px;
line-height: 1.4;
text-align: center;
} /* Hover effects */
.service-card:hover::before {
opacity: 1;
}
.service-card:hover .service-hover-text {
opacity: 1;
}
@media (max-width: 767px) {
.section-title-manpower {
font-size: clamp(24px, 6vw, 32px);
/* font-size: 30px; */
white-space: normal;
margin-right: 0;
margin-top: 20px;
text-align: center;
margin-left: 40px;
}
.section-description-manpower {
font-size: clamp(14px, 4vw, 18px);
/* font-size: 18px; */
padding: 10px;
text-align: center;
} /* Stack columns vertically */
.manpower-section .col-md-4,
.manpower-section .col-md-8,
.manpower-section .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
} /* Add space between cards */
.service-card {
margin-bottom: 20px;
} /* Label adjustments */
.service-label,
.service-label-1,
.service-label-2 {
font-size: 14px;
padding: 8px;
} /* Hover text visibility on smaller screens */
.service-card .service-hover-text {
font-size: 13px;
padding: 0 15px;
} /* Add spacing between rows on small devices */
.row.g-3 {
--bs-gutter-x: 1rem;
--bs-gutter-y: 1.5rem;
}
} /* @keyframes slideFromStart { 0% { opacity: 0; transform: translateX(-80px); } 100% { opacity: 1; transform: translateX(0); }}@keyframes slideFromEnd { 0% { opacity: 0; transform: translateX(80px); } 100% { opacity: 1; transform: translateX(0); }}@keyframes slideFromBottom { 0% { opacity: 0; transform: translateY(80px); } 100% { opacity: 1; transform: translateY(0); }} */ /* .animate-from-start { animation: slideFromStart 0.9s ease-out forwards;}.animate-from-end { animation: slideFromEnd 0.9s ease-out forwards;}.animate-from-bottom { animation: slideFromBottom 0.9s ease-out forwards;}.manpower-section .col-md-4 { opacity: 0; animation: slideFromStart 0.9s ease-out forwards;}.manpower-section .col-md-8 { opacity: 0; animation: slideFromEnd 0.9s ease-out forwards;}.manpower-section .row.g-3:last-of-type { opacity: 0; animation: slideFromBottom 0.9s ease-out forwards;} */ /* -----------------------cleaning & Hygiene---------------------------- */
.cleaning-section {
color: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
overflow-x: hidden;
}
.section-title-cleaning {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 1.2;
text-align: center;
color: white;
}
.cleaning-slider-wrapper {
position: relative;
width: 100%;
/* overflow-x: auto; */
/* scroll-behavior: smooth; */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.cleaning-slider-wrapper::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.cleaning-slider-track {
display: flex;
transition: transform 0.5s ease-in-out;
flex-wrap: nowrap;
padding-bottom: 10px;
margin-left: 0px;
margin-right: 216px;
}
.cleaning-card {
width: calc((100% - 60px) / 3.2);
max-width: 300px !important;
flex: 0 0 auto;
background: white;
border-radius: 190px 190px 0 0;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
text-align: center;
padding: 8px;
margin-top: 20px;
}
.cleaning-card:hover {
transform: translateY(-5px);
}
.card-img {
width: 100% !important;
height: auto;
border-radius: 20px 20px 0 0;
}
.card-title {
padding: 15px 10px;
font-size: 16px;
font-weight: 600;
color: #000;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: #600404;
color: #fff;
border: 1px solid #fff;
font-size: 21px;
padding: 6px 14px 6px 14px;
cursor: pointer;
border-radius: 50%;
transition: background 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.slider-btn:hover {
background: #fff;
color: #600404;
}
.prev-btn {
left: 10px;
margin-top: 40px;
}
.next-btn {
right: 10px;
margin-top: 40px;
} /* Mobile Responsive Adjustments */
@media (max-width: 991.98px) {
.slider-btn {
display: none;
}
.cleaning-slider-track {
gap: 12px;
padding-left: 10px;
}
.cleaning-card {
min-width: 300px !important;
margin-right: 0px !important;
margin-left: 0px !important;
}
.section-title-cleaning {
font-size: 32px;
}
}
@media (max-width: 991.98px) {
.slider-btn {
font-size: 24px;
padding: 8px 12px;
}
.cleaning-card {
min-width: 257px;
margin-right: 15px;
margin-left: -13px;
}
.section-title-cleaning {
font-size: 32px;
}
} /* ----------------------3 steps section----------------------------- */
.three-steps-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 44px;
color: #600404;
margin-bottom: 20px;
line-height: 65px;
}
.underlined-text {
display: inline-block;
}
.three-steps-description {
max-width: max-content;
margin: 0 auto 40px;
font-size: 20px;
line-height: 1.6;
color: #333;
text-align: justify;
}
.image-wrapper {
padding-left: 30px;
}
.rounded-image {
width: 100%;
height: auto;
border-radius: 20px;
}
.step-box {
gap: 15px;
padding-left: 30px;
}
.step-number::before {
content: "";
position: absolute;
top: -8px;
left: -9px;
width: 77px;
height: 75px;
border: 1px solid #600000;
border-radius: 50%;
z-index: -1;
text-align: center;
}
.step-number {
width: 92px;
height: 69px;
background-color: #fff;
border: 5px solid #600000;
color: #600000;
border-radius: 50%;
text-align: center;
line-height: 61px;
font-weight: bold;
font-size: 20px;
position: relative;
z-index: 1;
margin-bottom: 25px;
margin-top: 5px;
}
.step-number2::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 80px;
height: 80px;
border: 1px solid #600000;
border-radius: 50%;
z-index: -1;
text-align: center;
}
.step-number2 {
width: 78px;
height: 70px;
background-color: #fff;
border: 5px solid #600000;
color: #600000;
border-radius: 50%;
text-align: center;
line-height: 61px;
font-weight: bold;
font-size: 20px;
position: relative;
z-index: 1;
margin-bottom: 25px;
margin-top: 5px;
}
.step-number2::after {
content: "";
position: absolute;
top: 71px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(100% + 10px);
background-image: linear-gradient(
to bottom,
#600000 40%,
rgba(255, 255, 255, 0) 0%
);
background-size: 2px 10px;
background-repeat: repeat-y;
z-index: 0;
}
.step-box:not(.last-step) .step-number::after {
content: "";
position: absolute;
top: 67px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: calc(100% + 10px);
background-image: linear-gradient(
to bottom,
#600000 40%,
rgba(255, 255, 255, 0) 0%
);
background-size: 2px 10px;
background-repeat: repeat-y;
z-index: 0;
}
.step-text {
margin-left: 25px;
line-height: 33px;
font-family: "Poppins", sans-serif;
}
.step-text h5 {
margin-bottom: 5px;
font-weight: 600;
font-size: 22px;
display: flex;
}
.step-text p {
margin: 0;
font-size: 14px;
color: #444;
line-height: 20px;
text-align: left !important;
}
.facility-benefits-title .line {
display: block;
}
@media (max-width: 991px) {
.three-steps-title {
font-size: 40px;
line-height: 50px;
}
.three-steps-description {
font-size: 15px;
}
.image-wrapper {
padding-left: 0;
}
}
@media (max-width: 767px) {
.three-steps-title {
font-size: 28px;
line-height: 36px;
}
.three-steps-description {
font-size: 16px;
padding: 0 10px;
margin-bottom: -105px;
}
.rounded-image {
margin-bottom: 20px;
}
.image-wrapper {
text-align: center;
margin-bottom: 30px;
}
}
@media (max-width: 575.98px) {
.three-steps-title {
font-size: 24px;
line-height: 32px;
padding: 0 10px;
text-align: center;
}
.three-steps-description {
font-size: 18px;
padding: 0 15px;
}
.step-number {
width: 100px;
height: 45px;
font-size: 15px;
line-height: 40px;
}
.step-number::before {
top: -7px;
left: -8px;
width: 50px;
height: 50px;
}
.step-number2 {
width: 84px !important;
height: 47px;
font-size: 16px;
line-height: 43px;
}
.step-number2::before {
top: -6px;
left: -7px;
width: 50px;
height: 50px;
}
.step-text h5 {
font-size: 20px;
}
.step-text p {
font-size: 14px;
line-height: 18px;
text-align: left;
margin: 15px;
}
.step-box {
padding-left: 5px;
}
.image-wrapper {
text-align: center;
margin-bottom: 20px;
}
.rounded-image {
max-width: 90%;
height: auto;
margin: 0 auto;
}
.step-number2::after {
content: "";
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(180% + 10px);
background-image: linear-gradient(
to bottom,
#600000 40%,
rgba(255, 255, 255, 0) 0%
);
background-size: 2px 10px;
background-repeat: repeat-y;
z-index: 0;
}
.step-box:not(.last-step) .step-number::after {
content: "";
position: absolute;
top: 46px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(180% + 10px);
background-image: linear-gradient(
to bottom,
#600000 40%,
rgba(255, 255, 255, 0) 0%
);
background-size: 2px 10px;
background-repeat: repeat-y;
z-index: 0;
}
}
/* Apply only when screen size is between 1457px and 800px */
@media screen and (max-width: 1457px) and (min-width: 801px) {
.step-number {
width: 108px;
line-height: 60px; /* centers text */
}
.step-number2 {
width: 93px;
line-height: 60px; /* centers text */
}
}
/* ----------------------------------blog section-------------------------------------- */
.blogs-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 40px;
color: #600404;
}
.blog-card {
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.blog-card:hover {
transform: translateY(-5px);
}
.blog-image {
width: 100%;
height: auto;
border-bottom: 1px solid #eee;
border-radius: 15px 15px 0 0;
}
.blog-content {
background: #fff;
}
.blog-heading {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 16px;
color: #000;
margin-bottom: 5px;
}
.blog-description {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.blog-date {
font-size: 13px;
color: #111;
}
.read-more-btn {
background-color: #600404;
color: #fff;
font-weight: 500;
padding: 10px 25px;
border-radius: 25px;
font-family: "Poppins", sans-serif;
text-decoration: none;
font-size: 20px;
}
.read-more-btn:hover {
background-color: #fff;
color: #600404;
border: 1px solid #600404;
transition: background-color 0.3s ease, color 0.3s ease;
}
.testimonial-cards {
display: flex;
overflow-x: auto;
gap: 20px;
scroll-behavior: smooth;
padding-bottom: 10px;
margin-left: -25px;
}
.testimonial-card {
background-color: #ffffff;
border-radius: 15px;
padding: 20px;
width: 450px;
min-width: 315px;
height: 319px;
flex-shrink: 0;
font-family: "Poppins", sans-serif;
color: #333;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
margin-top: 60px;
margin-bottom: 15px;
}
.testimonial-card::after {
content: "";
position: absolute;
bottom: -14px;
left: 30px;
width: 0;
height: 0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #600404;
}
.avatar {
width: 90px;
height: 90px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-title {
font-size: 20px;
font-weight: 500;
margin-bottom: 10px;
}
.testimonial-text {
font-size: 20px;
line-height: 1.6;
font-weight: 500;
margin-bottom: 10px;
}
.stars {
font-size: 25px;
color: #600404;
}
.testimonial-cards::-webkit-scrollbar {
display: none;
}
.testimonial-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
background: rgba(255, 255, 255, 0.8);
border: none;
font-size: 24px;
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 50%;
color: #600000;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.testimonial-prev-btn {
left: 20px;
}
.testimonial-next-btn {
right: 20px;
}
.testimonial-title {
position: relative; /* for button positioning */
}
@media (max-width: 768px) {
.testimonial-btn {
font-size: 18px;
padding: 6px 10px;
}
}
@media (max-width: 576px) {
.testimonial-card {
width: 250px;
}
}
@media (max-width: 991px) {
.blogs-title {
font-size: 32px;
}
.blog-heading {
font-size: 15px;
}
.blog-description {
font-size: 13px;
}
.blog-date {
font-size: 12px;
}
.read-more-btn {
padding: 8px 20px;
font-size: 14px;
}
}
@media (max-width: 767px) {
.blogs-title {
font-size: 26px;
}
.blog-card {
margin-bottom: 20px;
}
.blog-heading {
font-size: 14px;
}
.blog-description {
font-size: 12px;
}
.read-more-btn {
padding: 8px 16px;
font-size: 13px;
}
}
@media (max-width: 575px) {
.blogs-title {
font-size: 22px;
}
.blog-heading {
font-size: 24px;
}
.blog-description {
font-size: 18px;
}
.blog-date {
font-size: 16px;
}
.read-more-btn {
font-size: 18px;
padding: 10px 25px;
}
} /* --------------------------------testimonial------------------------------------------- */
.testimonial-quote-block {
position: relative;
padding-left: 75px;
border-left: none;
margin: 0;
font-size: 18px;
}
.quote-icon {
font-size: 60px;
line-height: 1;
color: #600404;
font-weight: bold;
margin-bottom: 10px;
font-family: "Rokkitt", serif;
}
.testimonial-heading {
font-family: "Poppins", sans-serif;
font-size: 42px;
font-weight: 700;
color: #600404;
line-height: 1.4;
}
.arrow-link-custom {
position: relative;
display: inline-block;
color: #600404;
font-size: 22px;
font-weight: bold;
text-decoration: none;
padding-left: 20px;
}
.arrow-link-custom::before {
content: "";
position: absolute;
left: -107px;
top: 50%;
width: 222px;
height: 2px;
background-color: #600404;
transform: translateY(-50%);
}
.arrow-link:hover {
color: #4a0303;
border-color: #4a0303;
}
.testimonial {
background-color: #600404;
color: #fff;
padding: 40px 20px;
border-radius: 0;
}
.testimonial-wrapper {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 35px;
line-height: 100%;
letter-spacing: 0%;
}
@media (max-width: 767.98px) {
.testimonial-quote-block {
padding-left: 0;
text-align: center;
}
.quote-icon {
font-size: 38px;
margin-bottom: 6px;
}
.testimonial-heading {
font-size: 22px;
line-height: 1.3;
}
.arrow-link-custom {
font-size: 16px;
padding-left: 30px;
}
.arrow-link-custom::before {
width: 40px;
}
.testimonial {
padding: 30px 15px;
text-align: center;
}
.testimonial-wrapper {
font-size: 20px;
text-align: center;
padding: 0;
}
.testimonial-cards {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.testimonial-cards::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
.testimonial-card {
flex: 0 0 80%;
max-width: 80%;
min-width: 240px;
margin-right: 1rem;
}
.testimonial-text {
font-size: 18px;
}
.testimonial-btn {
display: none; /* hide buttons on small screens, use swipe */
}
}
@media (max-width: 575.98px) {
.testimonial-heading {
font-size: 30px;
}
.testimonial-wrapper {
font-size: 18px;
}
.testimonial-text {
font-size: 16px;
}
.testimonial-card {
flex: 0 0 90%;
max-width: 90%;
}
} /* -------------------------------contact----------------------------------------------------- */
.contact-banner {
background-image: url(../images/home/contact/contact-banner.webp);
background-size: cover;
background-position: center;
padding: 80px 0;
margin-top: -48px;
width: 100%;
}
.contact-title {
font-family: "Poppins", sans-serif;
font-weight: 700;
color: #fff;
font-size: 36px;
}
.form-control {
border-radius: 6px;
font-size: 14px;
}
textarea.form-control {
resize: none;
}
.btn-danger {
background-color: #600404;
border: none;
}
.btn-danger:hover {
background-color: #fff !important;
color: #600404 !important;
border: 1px solid #600404 !important;
transition: background-color 0.3s ease, color 0.3s ease !important;
}
.map-responsive {
overflow: hidden;
padding-bottom: 25.25%;
position: relative;
height: 0;
}
.map-responsive iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 0;
}
.details {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 25.78px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.p-tag {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 30px;
letter-spacing: 0%;
margin-top: 30px;
text-align: justify;
}
.contact-form {
margin-top: 40px;
}
.form-control {
border-radius: 6px;
font-size: 20px;
font-weight: 500;
padding: 11px 16px;
border: 1px solid #ccc;
box-shadow: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-control:focus {
border-color: #600404;
outline: none;
box-shadow: 0 0 0 2px rgba(96, 4, 4, 0.2);
}
::placeholder {
color: #999;
opacity: 1;
font-size: 13px;
}
textarea.form-control {
resize: none;
min-height: 120px;
}
.btn-danger {
background-color: #600404;
border: none;
border-radius: 30px;
font-weight: 500;
font-family: "Poppins", sans-serif;
padding: 10px 30px;
font-size: 18px;
transition: background-color 0.3s ease;
margin-top: 25px;
}
.btn-danger:hover {
background-color: #4a0303;
color: #fff;
}
.map-responsive {
/* position: relative; */
width: 100%;
max-height: 400px;
overflow: hidden;
border-radius: 10px;
}
.map-responsive iframe {
border: 0;
width: 100%; /* height: 100%; */
display: block;
}
.contact-img {
padding: 50px;
margin-top: -40px;
/* margin-left: 72px; */
}
@media (max-width: 576px) {
.form-wrapper {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.form-control {
font-size: 13px;
padding: 8px 12px;
width: 100%; /* full width for smaller screens */
max-width: 100%;
margin-bottom: 10px;
}
.btn-danger {
padding: 10px 20px;
font-size: 138x;
margin-top: 10px;
width: auto;
/* margin-left: 130px; */
}
.contact-banner{
/* margin-top: 0px!important; */
}
}
/* ---------------------------icon slider------------------------------------- */
.marquee {
overflow: hidden;
width: 100%;
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
}
.marquee_header {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 50px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
color: #600404;
}
.marquee__inner {
display: flex;
width: max-content;
animation: marquee 15s linear infinite;
}
.marquee__group {
display: flex;
}
.marquee__group span {
margin: 0 1.5rem;
white-space: nowrap;
background: #d9d9d9;
color: white; /* padding: 15px 75px 15px 75px; */
padding: 45px 133px 38px 85px;
border-radius: 6px;
font-size: 1.2rem;
text-align: center;
}
.marquee__group img {
/* width: 190px;
height: 90px; */
object-fit: contain;
margin-left: 50px;
}
@media (max-width: 576px) {
.marquee__group img {
/* width: 150px;
height: 70px; */
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
} /* -----------------------------Footer----------------------------------------------- */
.custom-footer {
background: url("../images/home/footer/footer-banner.webp") no-repeat center
center/cover;
position: relative;
color: #fff;
}
.footer-overlay {
padding: 60px 0;
}
.custom-footer a {
color: #fff;
transition: color 0.3s;
text-decoration: none;
}
.custom-footer a:hover {
color: #ddd;
text-decoration: none;
}
.newsletter-section,
.footer-overlay h5,
.footer-overlay p {
color: #fff;
}
.newsletter-section p {
color: #ccc;
font-size: 15px;
}
.transparent-input {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
}
.transparent-input::placeholder {
color: #ccc;
opacity: 1;
}
.transparent-input:focus {
background-color: transparent;
border-color: #ddd;
box-shadow: none;
}
.newsletter-section .btn-light {
background-color: #fff;
color: #600404;
border-radius: 0;
font-weight: bold;
width: 80%;
padding: 10px 15px;
}
.newsletter-section .btn-light:hover {
background-color: #fff;
color: #600404;
}
.footer-bar {
background-color: #600404;
/* padding: 15px 0; */
}
.footer-text {
font-size: 14px;
}
.social-icons {
display: flex;
gap: 15px;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
color: #600404;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 18px;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.social-icon:hover {
color: #ddd;
} /* Responsive Enhancements */
@media (max-width: 992px) {
.footer-overlay .row > div {
padding-left: 0 !important;
}
}
@media (max-width: 768px) {
.footer-overlay {
padding: 40px 20px;
text-align: center;
}
.footer-overlay .row {
flex-direction: column;
}
.footer-overlay h5 {
font-size: 20px;
margin-top: 20px;
}
.footer-overlay p {
font-size: 14px;
}
.newsletter-section form {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.transparent-input,
.newsletter-section .btn-light {
width: 100% !important;
max-width: 100%;
}
.footer-bar {
flex-direction: column !important;
text-align: center;
}
.social-icons {
justify-content: center;
margin-top: 10px;
}
.foot-menu {
margin-left: -36px;
}
}
@media (max-width: 576px) {
.footer-overlay h5 {
font-size: 18px;
}
.footer-overlay p,
.footer-text {
font-size: 13px;
}
.transparent-input {
padding: 8px 12px;
}
.newsletter-section .btn-light {
padding: 8px 12px;
font-size: 14px;
width: 65% !important;
}
}
.footer-bar {
background-color: #600404;
font-family: "Poppins", sans-serif;
}
.footer-bar .footer-text {
font-size: 14px;
}
.footer-bar .social-icons {
display: flex;
gap: 15px;
}
.footer-bar .social-icon {
color: #600000;
font-size: 16px;
transition: color 0.3s;
text-decoration: none;
}
.footer-bar .social-icon:hover {
color: #fff;
background-color: #600404;
border: 1px solid #fff;
} /* Mobile view: center-align footer items */
@media (max-width: 767.98px) {
.footer-bar .container {
flex-direction: column;
justify-content: center;
text-align: center;
}
.footer-bar .footer-text {
margin-bottom: 10px;
}
.footer-bar .social-icons {
justify-content: center;
}
} /* ------------------------------------------######ABOUT PAGE CSS#######------------------------------ */
.custom-mt {
margin-top: 100px !important;
}
.why-choose-us {
background-color: #fff;
font-family: "Poppins", sans-serif;
/* margin-top: 50px; */
}
.why-choose-us .container {
max-width: 1480px;
}
.section-desc {
color: #333;
font-weight: 400;
font-size: 20px;
line-height: 33px;
letter-spacing: 0%;
}
.image-wrapper {
position: relative;
width: 100%; /* height: 400px; */
}
.img-overlay-border1 {
position: absolute;
top: 80px;
left: 125px;
width: 240px;
height: 122px;
border: 15px solid #600404;
z-index: 0;
} /* Border for image 2 (bottom one) */
.img-overlay-border2 {
position: absolute;
top: 342px;
left: 22px;
width: 480px;
height: 132px;
border: 15px solid #600404;
z-index: 0;
} /* Optional: Style second image similarly */
.why-choose-im2 {
position: relative;
z-index: 2;
height: 220px;
width: 260px;
object-fit: cover;
}
.frame-top {
position: relative;
z-index: 1;
}
.why-choose-im1 {
position: relative;
z-index: 2;
height: 230px !important;
width: 218px !important;
margin-top: 0;
margin-bottom: -95px !important;
margin-left: -20px;
}
.why-choose-im2 {
margin-top: -80px !important;
left: 20px;
}
.frame-bottom {
position: relative;
top: 30px;
left: 0;
width: 80%;
z-index: 1;
}
.img-frame img {
width: 100%;
height: auto;
display: block;
}
.feature-number {
color: #600404;
margin-right: 5px;
font-weight: 600;
font-size: 35.86px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}
.feature-title {
color: #333;
font-weight: 600;
font-size: 22px;
line-height: 33px;
letter-spacing: 0%;
}
.feature-text {
/* font-size: 14px; */
color: #555;
font-weight: 400;
font-size: 20px;
line-height: 33px;
letter-spacing: 0%;
}
.about-text {
font-family: "Poppins", sans-serif;
z-index: 2;
color: #600404 !important;
}
.home-image {
object-fit: cover;
/* height: 400px;
max-height: 500px; */
}
@media (max-width: 991.98px) {
.why-choose-us {
margin-top: -45px;
}
.image-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
} /* SHOW borders on mobile */
.img-overlay-border1,
.img-overlay-border2 {
display: block;
position: absolute;
border: 10px solid #600404;
z-index: 0;
}
.img-overlay-border1 {
top: 40px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 120px;
}
.about {
margin-top: 105px !important;
}
.img-overlay-border2 {
top: 230px;
left: 50%;
transform: translateX(-50%);
width: 260px;
height: 130px;
}
.home-image {
object-fit: cover;
margin-top: 109px;
}
.frame-top,
.frame-bottom {
position: relative;
z-index: 2;
width: 90%;
max-width: 280px;
margin-bottom: 20px;
text-align: center;
}
.why-choose-im2 {
margin-top: -129px;
left: 20px;
}
.why-choose-im1,
.why-choose-im2 {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 8px;
}
.section-title {
font-size: 32px;
text-align: center;
margin-bottom: 20px;
}
.section-desc {
font-size: 18px;
line-height: 30px;
text-align: center;
margin-bottom: 30px;
}
.feature-number {
font-size: 28px;
margin-right: 8px;
}
.feature-title {
font-size: 20px;
}
.feature-text {
font-size: 16px;
line-height: 26px;
color: #555;
}
.col-6 {
width: 100%;
margin-bottom: 20px;
}
}
@media (max-width: 575.98px) {
.section-title {
font-size: 28px;
margin-top: -235px;
}
.section-desc {
font-size: 16px;
line-height: 28px;
}
.img-overlay-border1 {
top: 30px;
width: 200px;
height: 100px;
}
.img-overlay-border2 {
top: 200px;
width: 240px;
height: 110px;
}
.feature-number {
font-size: 24px;
}
.feature-title {
font-size: 18px;
}
.feature-text {
font-size: 15px;
line-height: 24px;
}
.home-image {
object-fit: cover;
margin-top: 58px;
}
.home-image1 {
object-fit: cover;
margin-top: 105px!important;
}
}
/* ---------- Base Styling Enhancements ---------- */
.feature-box {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
gap: 8px;
}
.feature-number {
color: #600404;
font-weight: 600;
font-size: 35.86px;
line-height: 100%;
text-align: center;
}
.feature-title {
color: #333;
font-weight: 600;
font-size: 22px;
line-height: 33px;
}
.feature-text {
color: #555;
font-weight: 400;
font-size: 20px;
line-height: 33px;
letter-spacing: 0%;
} /* ---------- Responsive Enhancements ---------- */
@media (max-width: 1199.98px) {
.why-choose-im1,
.why-choose-im2 {
width: 100% !important;
height: auto !important;
margin: 0 auto 20px auto !important;
display: block;
}
.img-overlay-border1 {
margin-left: -99px;
height: 135px;
margin-top: 245px;
width: 185px;
}
.img-overlay-border2 {
margin-left: -181px;
height: 89px;
margin-top: 223px;
width: 282px;
}
.image-wrapper {
text-align: center;
/* margin-top: -65px; */
}
}
@media (max-width: 991.98px) {
.section-title,
.mission-title,
.vision-title,
.core-title {
font-size: 28px;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
text-align: center !important;
}
.section-desc,
.mission-desc,
.vision-description,
.core-description {
font-size: 18px;
line-height: 30px;
text-align: center;
}
.feature-number {
font-size: 26px;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
text-align: center;
display: block;
}
.feature-title,
.feature-text {
font-size: 18px;
text-align: center;
}
.col-6 {
width: 100%;
}
}
@media (max-width: 767.98px) {
.accordion-header {
flex-direction: column;
align-items: flex-start;
padding: 10px;
}
.accordion-header i {
margin-top: 5px;
}
.about-mission-section .col-md-6,
.about-vision-section .col-md-6,
.core-values-section .col-md-6 {
padding: 0 15px;
}
.team-section .col-sm-6 {
width: 100%;
margin-bottom: 20px;
}
}
@media (max-width: 575.98px) {
.feature-number {
font-size: 22px;
}
.feature-title,
.mission-title,
.vision-title {
font-size: 24px;
align-items: center;
display: flex;
justify-content: center;
text-align: center;
}
.section-title {
font-size: 40px !important;
line-height: 55px;
text-align: center;
margin-top: 0px;
}
.what-we-do {
margin-top: -236px !important;
}
.section-desc,
.feature-text,
.mission-desc,
.vision-description {
font-size: 18px;
line-height: 24px;
}
.accordion-container .accordion-header span {
font-size: 16px;
}
} /* -----------------------------------Our Mission---------------------------------------------------- */
.about-mission-section {
background-color: #600404;
font-family: "Poppins", sans-serif; /* padding: 60px 0; */
position: relative;
overflow: hidden;
}
.mission-title {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 50px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
margin-top: -97px;
}
.mission-desc {
font-weight: 300;
font-size: 18px;
line-height: 30px;
letter-spacing: 0%;
color: #f5f5f5;
margin-top: 43px;
margin-left: 100px;
}
.mission-card {
background: #fff;
border-radius: 10px;
padding: 7px 0px 7px 7px;
display: flex;
align-items: flex-start;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 90%;
}
.vertical-line {
width: 8px;
height: 100%;
background-color: #a05252;
border-radius: 10px;
margin-right: 20px;
}
.mission-card-content {
margin-top: 20px;
}
.mission-card-content h5 {
color: #600404;
font-size: 20px;
margin-bottom: 10px;
}
.mission-card-content p {
margin: 0;
color: #333;
font-size: 16px;
width: 400px;
} /* Curved image effect on the right */
.curved-image-wrapper {
height: 100%;
width: 100%;
background-color: #600404;
border-top-left-radius: 200px;
overflow: hidden;
}
.curved-image-wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
} /* Position overlay card on image */
.overlay-card {
position: absolute;
bottom: 65px;
left: -619px;
z-index: 2;
width: 677px;
text-align: left;
}
.horizontal-line {
width: 12px;
height: 150px;
background-color: #b07d7d; /* Adjust to match image */
border-radius: 50px;
margin-right: 20px;
} /* Optional enhancements */
.mission-check {
list-style: none;
padding-left: 0;
}
.mission-check li {
position: relative;
padding-left: 35px;
margin-bottom: 12px;
font-size: 14px;
}
.mission-check li::before {
content: "\f00c"; /* Unicode for fa-check */
font-family: "Font Awesome 6 Free";
font-weight: 600;
position: absolute;
left: 0;
top: 0;
background-color: #fff;
color: #600404;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 24px;
font-size: 14px;
}
@media (max-width: 767px) {
.overlay-card {
position: static;
width: 100%;
margin-top: 20px;
}
}
@media (max-width: 1199.98px) {
.overlay-card {
left: -450px;
width: 550px;
}
.mission-card-content p {
width: 100%;
}
}
@media (max-width: 991.98px) {
.mission-title {
font-size: 36px;
margin-top: -40px;
}
.mission-desc {
font-size: 16px;
margin-left: 30px;
margin-top: 20px;
}
.overlay-card {
left: -300px;
width: 90%;
}
}
@media (max-width: 767.98px) {
.about-mission-section {
padding: 30px 0;
}
.mission-title {
font-size: 36px;
margin-top: 0;
text-align: center;
}
.mission-desc {
font-size: 18px;
line-height: 24px;
margin-left: 0;
margin-top: 15px;
text-align: center;
padding: 0 15px;
}
.overlay-card {
position: static;
width: 100%;
margin: 20px auto 0 auto;
left: 0;
}
.mission-card {
flex-direction: column;
padding: 15px;
max-width: 100%;
align-items: center;
text-align: center;
}
.horizontal-line {
width: 80px;
height: 8px;
margin: 0 auto 15px auto;
}
.mission-card-content {
margin-top: 0;
}
.mission-card-content h5 {
font-size: 20px;
}
.mission-card-content p {
font-size: 18px;
width: 100%;
padding: 0 10px;
}
.curved-image-wrapper {
border-top-left-radius: 100px;
}
} /* -----------------------------------------Vision----------------------------------------------------- */
.about-vision-section {
background-color: #fff;
font-family: "Poppins", sans-serif;
}
.vision-title {
color: #600404;
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 56px;
line-height: 75px;
text-align: center;
}
.vision-description {
color: #555;
font-size: 20px;
line-height: 1.7; /* max-width: 1075px; */
margin: 0 auto;
padding: 40px;
}
.vision-image-wrapper {
/* max-width: 1000px; */
margin: 0 auto;
}
.rounded-image {
border-radius: 20px;
width: 100%;
height: auto;
display: block;
}
@media (max-width: 1199.98px) {
.vision-title {
font-size: 46px;
line-height: 60px;
}
.vision-description {
font-size: 18px;
padding: 30px;
}
}
@media (max-width: 991.98px) {
.vision-title {
font-size: 38px;
line-height: 50px;
}
.vision-description {
font-size: 17px;
padding: 25px;
}
}
@media (max-width: 767.98px) {
.vision-title {
font-size: 30px;
line-height: 42px;
padding: 0 10px;
}
.vision-description {
font-size: 16px;
line-height: 1.6;
padding: 20px 15px;
}
.vision-image-wrapper {
padding: 0 15px;
}
.rounded-image {
border-radius: 15px;
}
}
@media (max-width: 575.98px) {
.vision-title {
font-size: 36px;
line-height: 36px;
}
.vision-description {
font-size: 18px;
padding: 15px 10px;
}
} /* ------------------------------------------------meet our team------------------------ */
.team-section {
background-color: #600404;
font-family: "Poppins", sans-serif;
}
.team-card {
background-color: transparent;
border-bottom-right-radius: 100px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.team-container {
top: 224px;
position: relative;
}
.team-card:hover {
transform: translateY(-5px);
}
.team-img {
width: 100%;
height: auto;
display: block;
border-bottom-right-radius: 100px;
}
.team-info {
background-color: #600404;
padding-top: 20px;
padding-bottom: 20px;
border-bottom-right-radius: 100px;
color: #fff;
}
.team-info h5 {
font-size: 18px;
margin-bottom: 5px;
}
.team-info p {
font-size: 14px;
margin: 0;
} /* Responsive Styling */
@media (max-width: 991.98px) {
.team-card {
border-bottom-right-radius: 50px;
}
.team-img {
border-bottom-right-radius: 50px;
}
.team-info {
border-bottom-right-radius: 50px;
padding-top: 20px;
}
}
@media (max-width: 575.98px) {
.team-card {
border-bottom-right-radius: 30px;
}
.team-img {
border-bottom-right-radius: 30px;
}
.team-info {
border-bottom-right-radius: 30px;
padding-left: 15px;
padding-right: 15px;
}
.team-info h5 {
font-size: 15px;
}
.team-info p {
font-size: 12.5px;
}
} /* --------------------------------------------core values--------------------------------------------------------- */
.core-values-section {
background-color: #fff;
/* padding-top: 9rem !important; */
}
.image-container {
position: relative;
width: fit-content;
display: inline-block;
}
.rotated-image {
border-radius: 20px;
transform: rotate(-2deg);
max-width: 80%;
height: auto;
z-index: 2;
position: relative;
margin-top: 100px;
}
.core-title {
color: #600404;
font-size: 3.3rem;
font-weight: 700;
text-align: left;
}
.core-description {
color: #333;
margin-bottom: 30px;
font-size: 20px;
margin-top: 10px;
}
.accordion-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.accordion-item {
background-color: #600404;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
}
.accordion-header {
color: #fff;
font-weight: 700;
font-size: 18px;
padding: 23px 0px 23px 0px;
display: flex;
/* justify-content: space-evenly; */
align-items: center;
cursor: pointer;
left: 5px;
margin-left: 133px;
text-align: flex-start;
}
.accordion-number {
margin-right: -98px;
} /* New structure for correct spacing/alignment */
.accordion-label {
/* display: flex; */
align-items: left;
gap: 12px;
}
.accordion-label span {
font-weight: 700;
font-size: 14px;
white-space: nowrap;
}
.accordion-label p {
margin: 0;
font-size: 14px;
color: #fff;
}
.accordion-header i {
font-size: 12px;
transition: transform 0.3s ease;
margin-left: auto !important;
margin-right: 10px !important;
}
.accordion-item.active .accordion-header i {
transform: rotate(180deg);
}
.accordion-content {
background-color: #fff;
color: #600404;
padding: 12px 16px;
font-size: 18px;
display: none;
}
.accordion-item.active .accordion-content {
display: block;
}
.accordion-header i {
margin-left: 169px;
}
/* Existing styles remain unchanged above */
/* MOBILE RESPONSIVE STYLES */
@media (max-width: 576px) {
.accordion-header {
font-size: 16px;
padding: 16px 12px;
margin-left: 0;
text-align: left;
flex-direction: row;
justify-content: space-between;
}
.accordion-number {
margin-right: 0;
}
.accordion-label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.accordion-label span,
.accordion-label p {
font-size: 13px;
text-align: left;
}
.accordion-header i {
margin-left: auto !important;
margin-right: 0 !important;
font-size: 14px;
}
.accordion-content {
font-size: 16px;
padding: 10px 12px;
}
}
/* ------------------------####contact page#####--------------------------------------------------- */
.map-responsive {
/* position: relative; */
width: 100%;
max-height: 500px;
overflow: hidden;
border-radius: 10px;
}
.map-responsive iframe {
width: 100%; /* height: 100%; */
max-height: 500px;
border: 0;
} /* -----------------------------consult section----------------------- */
.consult-section {
background-color: #660000; /* Dark red background */
padding: 60px 0;
}
.consult-img {
max-width: 28%;
height: auto;
position: absolute;
margin-top: -310px;
margin-left: -238px;
}
.consult-title {
font-size: 38px;
font-weight: bold;
margin-bottom: 20px;
text-align: left;
line-height: 51px;
}
.consult-text {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}
.features span {
display: inline-block;
margin-right: 15px;
font-size: 14px;
}
.features i {
color: #fff;
margin-right: 5px;
} /* Button Styling */
.btn-light {
padding: 10px 25px;
border-radius: 25px;
font-weight: 600;
color: #660000;
background-color: #fff;
border: 2px solid #660000;
transition: all 0.3s ease;
} /* Hover Effect */
.btn-light:hover {
background-color: #660000;
color: #fff;
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(102, 0, 0, 0.3);
cursor: pointer;
} /* Mobile: up to 767.98px */
/* Small devices (portrait phones) */
/* @media (max-width: 575.98px) {
.consult-section {
padding: 40px 15px;
text-align: center;
}
.consult-img {
max-width: 80%;
margin: 0 auto 30px;
position: relative;
}
.consult-title {
font-size: 26px;
line-height: 36px;
text-align: center;
}
.consult-text {
font-size: 15px;
text-align: center;
}
.features span {
display: block;
margin: 10px auto;
font-size: 14px;
}
} */
/* Tablets (portrait and landscape) */
/* @media (min-width: 576px) and (max-width: 991.98px) {
.consult-img {
max-width: 60%;
margin: 0 auto 20px;
position: relative;
}
.consult-title {
font-size: 30px;
text-align: center;
}
.consult-text {
font-size: 16px;
text-align: center;
}
.features {
text-align: center;
}
.features span {
display: inline-block;
margin: 8px 10px;
}
} */
/* Small desktops */
/* @media (min-width: 992px) and (max-width: 1199.98px) {
.consult-img {
max-width: 50%;
margin: 0;
}
.consult-title {
font-size: 34px;
}
.consult-text {
font-size: 17px;
}
} */
/* Large desktops */
/* @media (min-width: 1200px) {
.consult-img {
max-width: 27%;
margin-left: -276px;
margin-top: -297px;
}
.consult-title {
font-size: 38px;
}
.consult-text {
font-size: 18px;
}
} */
/* Default (mobile-first) */
.consult-img {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
}
@media (max-width: 767px) {
.consult-title {
text-align: center;
}
}
@media (max-width: 767px) {
.consult-img {
display: none;
}
}
/* Medium screens (tablets) */
@media (min-width: 768px) {
.consult-img {
max-width: 70%;
margin-top: -50px;
}
}
/* Large screens */
@media (min-width: 992px) {
.consult-img {
max-width: 40%;
margin-top: -100px;
}
}
/* Extra large screens */
@media (min-width: 1200px) {
.consult-img {
max-width: 30%;
margin-left: 4px;
margin-top: -288px;
}
}
/* Ultra-wide (if needed) */
@media (min-width: 1440px) {
.consult-img {
margin-left: 20px;
margin-top: -258px;
max-width: 25%;
}
}
/* ------------------consult sec 2------------------------------- */
.consult-section-alt {
padding: 60px 0;
background-color: #fff;
}
.consult-title-alt {
font-size: 46px;
font-weight: bold;
color: #660000;
margin-top: -31px;
text-align: left;
font-family: "Poppins", sans-serif;
}
.consult-desc {
font-size: 20px;
color: #333;
margin-top: 49px;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 18px;
margin-top: 20px;
}
.contact-info li {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.contact-info .icon {
background-color: #660000;
color: #fff;
padding: 12px 17px;
border-radius: 50%;
font-size: 16px;
margin-right: 15px;
transition: all 0.3s ease;
}
.contact-info .icon:hover {
transform: scale(1.1);
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
color: #660000;
cursor: pointer;
}
.contact-info strong {
font-size: 15px;
color: #000;
} /* Image frame and shape */
.image-frame {
position: relative;
display: inline-block;
max-width: 100%;
} /* .image-frame::before { content: ""; position: absolute; top: 20px; left: -20px; width: 100%; height: 100%; background-color: #660000; border-top-left-radius: 50px; z-index: -1;} */
.rounded-image {
border-top-left-radius: 100px;
overflow: hidden;
width: 100%;
max-width: 90%;
} /* Responsive adjustments */
@media (max-width: 767.98px) {
.consult-title-alt {
font-size: 30px;
text-align: center;
margin-top: 10px;
line-height: 41px;
}
.consult-desc {
font-size: 16px;
text-align: center;
}
.contact-info {
text-align: center;
}
.contact-info li {
flex-direction: column;
align-items: center;
}
.contact-info .icon {
margin-bottom: 10px;
margin-right: 0;
}
}
/* -----------------------------complete facility management services----------------------------------- */
.complete-section-image {
/* position: relative;
width: fit-content; */
margin: 0 auto;
margin-left: 303px !important;
}
.baaner-image {
margin-top: 99px;
}
.complete-section-image .bg-image {
width: 734px;
/* max-width: 565px; */
height: auto;
display: block;
border-radius: 8px;
left: -57px;
margin-left: -399px;
margin-top: 53px;
}
.section-sub-title {
color: #600404;
font-weight: 600;
}
.overlay-text {
position: absolute;
bottom: -29px;
left: 45px;
/* background: rgba(0, 0, 0, 0.6); */
color: #fff;
padding: 8px 16px;
font-size: 18px;
font-weight: 600;
border-radius: 4px;
z-index: 3;
text-align: center;
}
.overlay-text-2 {
position: absolute;
bottom: -20px;
left: 80px;
/* background: rgba(0, 0, 0, 0.6); */
color: #fff;
padding: 8px 16px;
font-size: 18px;
font-weight: 600;
border-radius: 4px;
z-index: 3;
text-align: center;
}
/* For ~110% zoom (screen width ~1380px–1440px, adjust if needed) */
@media (max-width: 1440px) and (min-width: 1371px) {
.overlay-text {
bottom: -30px;
left: 10px;
font-size: 18px;
}
.overlay-text-2 {
bottom: -19px;
left: 75px;
font-size: 18px;
}
}
/* For ~115–120% zoom (your earlier 110% breakpoint) */
@media (max-width: 1370px) and (min-width: 1290px) {
.overlay-text {
bottom: -25px;
left: 35px;
font-size: 18px;
}
.overlay-text-2 {
bottom: -18px;
left: 70px;
font-size: 18px;
}
}
/* For ~125% zoom */
@media (max-width: 1289px) {
.overlay-text {
bottom: -32px;
left: 5px;
font-size: 18px;
}
.overlay-text-2 {
bottom: -15px;
left: 60px;
font-size: 18px;
}
}
.mission-text {
padding-left: 100px;
}
.wonder-margin {
}
.image-wrapper-img1 {
width: 90%;
height: auto;
display: block;
border-radius: 8px;
margin-left: 16px;
margin-top: 71px !important;
}
.floor-img {
margin-left: 38px !important;
}
@media (max-width: 576px) {
.overlay-text {
bottom: -5px;
left: 27px;
font-size: 14px;
padding: 6px 12px;
text-align: left;
}
.floor-img {
margin-left: 38px;
}
.overlay-text-2 {
bottom: -7px;
left: 55px;
font-size: 14px;
padding: 6px 12px;
text-align: left;
}
.mission-text {
padding-left: 70px;
}
.mission-text1 {
padding-left: 40px;
}
.wonder-margin {
margin-bottom: -17px !important;
}
}
/* Medium Devices (992px and below) */
@media (max-width: 992px) {
.section-sub-title {
font-size: 24px;
}
}
/* Small Devices (768px and below) */
@media (max-width: 768px) {
.section-sub-title {
font-size: 20px;
}
}
/* Extra Small Devices (576px and below) */
@media (max-width: 576px) {
.section-sub-title {
font-size: 18px;
text-align: center; /* Optional: center text on mobile */
}
}
.complete-section-image .overlay-image {
position: absolute;
bottom: 80px;
left: -347px;
width: 409px;
border-radius: 6px;
background: #fff;
z-index: 2;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
width: 538px;
position: absolute;
}
@media (max-width: 768px) {
.complete-section-image .overlay-image {
width: 225px !important;
bottom: 258px;
left: 2%;
}
}
/* .facility-benefits-section {
background-color: #600404;
color: #fff;
}
.facility-benefits-title {
font-size: 44px;
font-family: popins, sans-serif;
line-height: 69px;
}
.facility-benefits-wrapper {
margin-top: 30px !important;
}
.benefit-item {
text-align: center;
}
.benefit-icon {
width: 80px;
height: auto;
}
.benefit-title {
margin-bottom: 10px;
font-size: 1rem;
}
.benefit-desc {
max-width: 250px;
margin: 0 auto;
font-size: 0.9rem;
}
.square-box {
width: 610px;
height: 100px;
background-color: #600404;
border-top-left-radius: 59px;
border-top-right-radius: 59px;
position: absolute;
bottom: -100px;
left: 49%;
transform: translateX(-50%);
z-index: 2;
} */
/* ----------/ */
.timeline-section {
position: relative;
margin-top: 75px;
}
/* Medium Devices (992px and below) */
@media (max-width: 992px) {
.timeline-section {
margin-bottom: -120px;
}
}
/* Small Devices (768px and below) */
@media (max-width: 768px) {
.timeline-section {
margin-bottom: -80px;
}
.how-we-work {
margin-top: 120px;
}
}
/* Extra Small Devices (576px and below) */
@media (max-width: 576px) {
.timeline-section {
margin-bottom: -60px;
}
}
.timeline-item {
position: relative;
padding-left: 60px;
margin-bottom: 40px;
}
.timeline-icon {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
background-color: #fff;
border: 2px solid #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
font-size: 18px;
}
.timeline-item::before {
content: "";
position: absolute;
left: 25px;
top: 40px;
width: 2px;
height: calc(100% - 0px);
background-color: #000;
z-index: 1;
}
.timeline-item:last-child::before {
display: none;
}
.timeline-content h5 {
font-weight: 700;
margin-bottom: 10px;
text-align: left;
}
.timeline-content p {
margin: 0;
text-align: left;
}
.timeline-content {
margin-left: 20px;
}
/* --------consult-------- */
.facility-benefits-section {
background-color: #600404;
color: #fff;
padding: 60px 20px 120px; /* Add bottom padding for square box space */
position: relative;
text-align: center;
}
.facility-benefits-title {
font-size: 44px;
font-family: "Poppins", sans-serif;
line-height: 69px;
}
.facility-benefits-wrapper {
margin-top: 30px !important;
}
.benefit-item {
text-align: center;
padding: 20px 10px;
border: 1px solid #fff;
gap: 3px;
border-radius: 10px;
}
/* .card{
border: 1px solid #fff;
} */
.benefit-icon {
width: 80px;
height: 70px !important;
height: auto;
margin-bottom: 15px;
}
.benefit-title {
margin-bottom: 10px;
font-size: 22px;
font-weight: 600;
}
.benefit-desc {
max-width: 250px;
margin: 0 auto;
font-size: 18px;
line-height: 1.5;
}
/* Decorative box at the bottom */
.square-box {
width: 560px;
height: 100px;
background-color: #600404;
border-top-left-radius: 59px;
border-top-right-radius: 59px;
position: absolute;
bottom: -100px;
left: 57%;
transform: translateX(-50%);
z-index: 2;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.facility-benefits-title {
font-size: 32px;
line-height: 48px;
}
.benefit-desc {
font-size: 0.85rem;
max-width: 90%;
}
.square-box {
width: 90%;
height: 80px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
top: 550px;
}
.complete-banner-title {
width: 600px;
font-size: 30px !important;
}
.qc-desc {
font-size: 20px;
}
}
@media (max-width: 576px) {
.facility-benefits-title {
font-size: 26px;
line-height: 40px;
}
.benefit-icon {
width: 60px;
}
.benefit-title {
font-size: 0.95rem;
}
.benefit-desc {
font-size: 0.8rem;
}
.square-box {
height: 60px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
margin-top: -103px;
width: 367px;
margin-left: -29px;
}
.complete-banner-title {
width: 400px;
font-size: 30px !important;
margin-top: 112px;
}
.qc-desc {
font-size: 18px;
}
}
/* ------------- */
.text-maroon {
color: #600404;
font-size: 44px !important;
display: flex;
justify-content: flex-start;
line-height: 50px;
}
@media (max-width: 576px) {
.text-maroon {
font-size: 28px !important;
line-height: 36px;
justify-content: center; /* Optional: center on mobile */
text-align: center; /* Optional: center text */
}
}
/* .qc-icon {
width: 40px;
height: 40px;
background-color: #600404;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 16px;
} */
.qc-icon {
background-color: #600404;
padding: 10px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
margin-top: 90px !important;
}
.qc-para {
margin-top: -40px;
margin-left: -53px;
padding-bottom: 3px;
padding-top: 69px;
}
.qc-ptag {
margin-top: 26px;
}
.qc-icon i {
color: white;
font-size: 18px;
}
.image-wrapper {
position: relative;
}
.image-wrapper img {
width: 90%;
height: auto;
display: block;
border-radius: 8px;
margin-left: 45px;
/* margin-top: -128px; */
}
.image-wrapper .overlay-img {
position: absolute;
left: -66px !important;
bottom: -30px;
width: 52%;
/* border: 6px solid #600404; */
background: #fff;
border-radius: 6px;
z-index: 2;
}
/* Tablet */
@media (max-width: 992px) {
.image-wrapper img {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: -40px !important;
}
.image-wrapper .overlay-img {
width: 50%;
left: -30px;
bottom: -20px;
}
}
/* Mobile */
@media (max-width: 576px) {
.image-wrapper img {
width: 100%;
margin-left: 0px;
margin-right: auto;
margin-top: -22px !important;
}
/* .image-wrapper-about{
width: 100%;
margin-left: 0px;
margin-right: auto;
margin-top: -37px!important;
} */
.image-wrapper .overlay-img {
width: 60%;
left: 50%;
transform: translateX(-50%);
bottom: -20px;
}
/* .image-wrapper-about .overlay-img {
width: 60%;
left: 50%;
transform: translateX(-50%);
bottom: -20px;
} */
}
/* ----------------janitorial-supplies---------- */
.image-position {
margin-left: -80px;
margin-top: 100px;
}
.steps-we-follow {
background-color: #600404;
}
.jani-supply {
font-size: 32px;
margin-top: 110px;
}
.steps-we-follow h2 {
margin-top: -110px;
margin-bottom: 15px;
color: #fff;
}
.steps-we-follow h6 {
color: #fff;
}
.steps-we-follow p {
color: #ddd;
font-size: 18px;
}
@media (max-width: 991.98px) {
.steps-we-follow p {
font-size: 16px;
}
}
.image-position {
width: 100%;
margin-left: 0px;
margin-right: auto;
margin-top: -60px !important;
}
/* Small screens (mobiles) */
@media (max-width: 575.98px) {
.steps-we-follow p {
font-size: 14px;
}
}
.steps {
margin-left: -175px;
}
.steps-section {
background-color: #600404;
padding-top: 25px;
}
.step-icon {
width: 50px;
height: 50px;
background-color: #600404;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
min-width: 50px;
border: 1px solid #fff;
}
@media (max-width: 575.98px) {
.step-item {
flex-direction: row;
align-items: flex-start;
}
.step-icon {
width: 40px;
height: 40px;
font-size: 16px;
}
.steps-section h6 {
font-size: 16px;
}
.steps-section p {
font-size: 13px;
}
.baaner-image {
margin-top: 99px;
}
.jani-supply {
font-size: 25px !important;
margin-top: 118px;
}
.steps {
margin-top: -17px !important;
font-size: 30px;
align-items: center;
justify-content: center;
text-align: left;
/* margin-bottom: 89px; */
margin-left: 1px;
}
}
@media (max-width: 1390px) {
.steps-we-follow {
margin-top: 25px;
}
.steps {
margin-left: 0px;
margin-top: 10px;
}
.image-position {
margin-left: 0px;
margin-top: -40px;
}
.steps-we-follow h2 {
margin-top: -90px;
align-items: center;
margin-left: -1px !important;
}
.jani-supply {
font-size: 32px;
margin-top: 110px;
}
.baaner-image {
margin-top: 90px;
}
}
/* ---------industries we serve---------- */
.industries-we-serve {
background-color: #f8f8f8;
margin-bottom: 100px !important;
}
.icon-box {
background-color: #600404;
padding: 15px;
border-radius: 12px;
display: inline-block;
}
.industry-card {
border-radius: 20px;
box-shadow: -8px 8px 0 #600404;
transition: all 0.3s ease;
}
.industry-card:hover {
transform: translateY(-5px);
box-shadow: -12px 12px 0 #600404;
}
/* .industry-card {
position: relative;
background: #fff;
border-radius: 20px;
padding: 2rem;
text-align: left;
height: 100%;
transition: all 0.3s ease-in-out;
box-shadow: -10px 10px 0 #600404;
}
.industry-card .icon-box {
margin-bottom: 1rem;
}
.industry-card h6 {
font-weight: 700;
margin-bottom: 0.5rem;
}
.industry-card p {
font-size: 0.875rem;
color: #6c757d;
margin-bottom: 0;
}
.industry-card:hover {
transform: translateY(-5px);
box-shadow: 12px 12px 0 #600404;
}
@media (max-width: 767px) {
.industry-card {
box-shadow: -6px 6px 0 #600404;
padding: 1.5rem;
}
} */
/* ----------steps-we-folw-sec2--------- */
.steps-we-follow-sec1 {
background-color: #fff;
}
.steps-title-sec1 {
color: #600404 !important;
font-size: 38px;
}
.step-item p {
font-size: 0.95rem;
color: #000;
}
.step-icon-sec1 {
width: 50px;
height: 50px;
background-color: #600404;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* ---------------manpower------------- */
.process-section {
/* background-color: #600404; */
color: #fff;
padding: 60px 20px 120px;
position: relative;
text-align: center;
}
.process-title {
font-size: 44px;
font-family: "Poppins", sans-serif;
color: #600404;
line-height: 69px;
}
.process-wrapper {
margin-top: 30px !important;
margin-bottom: 20px;
}
.process-icon-wrapper {
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
padding-top: 25px !important;
margin: 0 auto 15px;
}
.process-item {
text-align: center;
padding: 20px 10px;
border: 1px solid #fff;
gap: 3px;
border-radius: 10px;
background-color: #600404;
}
.process-icon {
width: 40px;
height: auto;
margin-bottom: 15px;
}
.process-step-title {
margin-bottom: 10px;
font-size: 22px;
font-weight: 600;
}
.process-desc {
max-width: 250px;
margin: 0 auto;
font-size: 18px;
line-height: 1.5;
}
.square-box {
width: 583px;
height: 100px;
background-color: #600404;
border-top-left-radius: 59px;
border-top-right-radius: 59px;
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.ms-by {
margin-left: 94px;
}
.by-img {
margin-left: -5px !important;
}
.by-img4 {
margin-left: -5px !important;
}
.by-img1 {
margin-left: 34px !important;
}
.by-img2 {
margin-left: 10px !important;
}
.by-img3 {
margin-left: 17px !important;
}
.nation-text {
padding-left: 60px !important;
}
.by-img4 {
margin-left: 35px !important;
}
.by-img5 {
margin-left: 25px !important;
}
.by-img6 {
margin-left: 58px !important;
}
.nation-text2 {
padding-left: 155px !important;
}
.mission-text-new {
padding-left: 140px !important;
}
/* For ~110% zoom */
@media screen and (max-width: 1745px) and (min-width: 1570px) {
.by-img,
.by-img4 {
margin-left: -5px !important;
}
.by-img1 {
margin-left: 34px !important;
}
.by-img2 {
margin-left: 10px !important;
}
.by-img3 {
margin-left: 17px !important;
}
.by-img4 {
margin-left: 35px !important;
}
.by-img5 {
margin-left: 63px !important;
}
.nation-text {
padding-left: 60px !important;
}
.nation-text2 {
padding-left: 180px !important;
}
.mission-text-new {
padding-left: 140px !important;
}
}
/* For ~125% zoom */
@media screen and (max-width: 1536px) {
.by-img,
.by-img4 {
margin-left: -5px !important;
}
.by-img1 {
margin-left: 34px !important;
}
.by-img2 {
margin-left: 10px !important;
}
.by-img3 {
margin-left: 17px !important;
}
.by-img4 {
margin-left: 35px !important;
}
.by-img5 {
margin-left: 63px !important;
}
.nation-text {
padding-left: 60px !important;
}
.nation-text2 {
padding-left: 180px !important;
}
.mission-text-new {
padding-left: 140px !important;
}
}
@media (max-width: 768px) {
.process-title {
font-size: 32px;
line-height: 48px;
}
.by-img5 {
margin-left: 10px !important;
}
.process-desc {
font-size: 0.85rem;
max-width: 90%;
}
.by-img {
margin-left: -5px !important;
}
.by-img1 {
margin-left: 4px !important;
}
.by-img2 {
margin-left: 10px !important;
}
.by-img3 {
margin-left: 10px !important;
}
.by-img4 {
margin-left: -5px !important;
}
.by-img2 {
margin-left: 10px !important;
}
.by-img6 {
margin-left: 15px !important;
}
.ms-by {
margin-left: 24px;
}
.nation-text2 {
padding-left: 94px !important;
}
.square-box {
width: 93%;
height: 80px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
top: 515px;
margin-left: 0px;
}
.complete-banner-title {
width: 300px;
font-size: 24px !important;
}
.qc-desc {
font-size: 18px;
}
}
@media (max-width: 576px) {
.process-title {
font-size: 26px;
line-height: 40px;
}
.process-icon {
width: 60px;
}
.process-step-title {
font-size: 0.95rem;
}
.process-desc {
font-size: 0.8rem;
}
}
/* ----------images1- */
.bg-strip-wrapper {
position: relative;
overflow: visible; /* Make sure the image can go beyond this container */
}
.bg-strip {
background-color: #600404;
height: 350px;
width: 60%;
margin-top: -300px;
}
/* .factory-img1{
height: 400px !important;
width: 400px !important;
} */
.factory-img2 {
margin-bottom: 80px !important;
height: 340px !important;
border-radius: none !important;
}
.image-wrapper-new img {
width: 80%;
height: auto;
display: block;
/* border-radius: 8px; */
margin-left: 100px;
}
.image-wrapper-new .overlay-img-new {
position: absolute;
left: -45px;
bottom: -30px;
width: 52%;
/* border: 6px solid #600404; */
background: #fff;
/* border-radius: 6px; */
z-index: 2;
}
.overlay-img {
/* position: absolute;
top: -100px;
left: 20px;
z-index: 2; */
}
.vertical-strip {
position: absolute;
top: -50%;
left: 55px;
width: 3%;
height: 195px;
background-color: #600404;
z-index: 1;
transform: translateY(-50%);
}
@media (max-width: 991px) {
.image-wrapper-new img {
width: 100%;
margin-left: 0;
}
.bg-strip {
/* width: 100%; */
/* height: 250px; */
/* margin-top: -180px; */
}
.vertical-strip {
left: 10px;
height: 120px;
width: 6%;
}
.overlay-img-new {
width: 80%;
left: 0;
bottom: 0;
position: relative;
margin-top: 20px;
}
.factory-img2 {
margin-left: 47px !important;
}
}
@media (max-width: 576px) {
.bg-strip {
/* height: 180px; */
/* margin-top: -140px; */
margin-left: 27px;
}
.image-wrapper-new .overlay-img-new {
position: absolute;
left: -45px;
bottom: -59px;
width: 62%;
/* border: 6px solid #600404; */
background: #fff;
/* border-radius: 6px; */
z-index: 2;
}
.vertical-strip {
height: 100px;
left: 5px;
width: 8%;
margin-top: 76px;
}
.overlay-img-new {
width: 100%;
margin-top: 15px;
}
}
/* -------------- */
.bg-stripe-2 {
background-color: #600404;
height: 326px;
width: 60%;
margin-top: -153px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* -------consult-img3------------------- */
.consult-man {
margin-top: -98px !important;
}
.complete-banner-title {
color: #600404;
font-size: 58px;
margin-top: 100px;
}
.contact-btn-new {
display: inline-block;
background-color: #600404;
color: white;
border: none;
border-radius: 25px;
padding: 13px 20px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
width: 160px;
text-align: center;
}
.contact-btn-new:hover {
background-color: #fff;
border: 1px solid #600404;
color: #600404;
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 1200px) {
.complete-banner-title {
font-size: 48px;
margin-top: 80px;
}
}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 991.98px) {
.complete-banner-title {
font-size: 40px;
margin-top: 60px;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) {
.complete-banner-title {
font-size: 32px;
margin-top: 40px;
}
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
.complete-banner-title {
font-size: 24px;
margin-top: 100px;
}
}
/* -----------------complete section2--------- */
.complete-sec-div {
margin-top: 88px;
}
@media (max-width: 992px) {
.complete-img-1 {
width: 400px !important;
margin-left: -200px !important;
}
.complete-img-2 {
width: 260px !important;
margin-left: -200px !important;
}
.complete-sec-div {
margin-top: 0px;
}
}
/* Small devices (768px and below) */
@media (max-width: 768px) {
.complete-img-1 {
width: 350px !important;
margin-left: -220px !important;
}
.complete-img-2 {
width: 240px !important;
margin-left: -220px !important;
}
.complete-sec-div {
margin-top: 0px;
}
}
/* Extra small devices (phones ≤576px) */
@media (max-width: 576px) {
.complete-img-1 {
width: 300px !important;
margin-left: -250px !important;
}
.complete-img-2 {
width: 220px !important;
margin-left: -240px !important;
margin-bottom: 35px !important;
}
.complete-sec-div {
/* margin-top: -34px; */
}
}
@media (max-width: 576px) {
.commitment-img-2 {
/* margin-left: -178px !important; */
margin-left: 58px !important;
}
}
.complete-section-image {
position: relative;
height: 420px;
width: 100%;
overflow: visible;
}
.factory-stripe-1 {
position: absolute;
width: 637px;
height: 419px;
background-color: #600404;
/* transform: rotate(-50deg); */
top: 26px;
left: -25px;
/* opacity: 0.5; */
z-index: 1;
/* border-radius: 10px; */
border-top-left-radius: 195px;
}
.main-factory-image {
position: relative;
z-index: 2;
width: 100%;
max-width: 600px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border-top-left-radius: 199px;
}
.fac-ptag {
font-size: 18px;
font-family: "Poppins", sans-serif;
}
@media (max-width: 768px) {
.complete-section-image {
aspect-ratio: 3 / 2;
}
.main-factory-image {
border-top-left-radius: 20vw;
}
.factory-stripe-1 {
border-top-left-radius: 20vw;
}
}
@media (max-width: 480px) {
.complete-section-image {
aspect-ratio: 4 / 5;
}
.factory-stripe-1 {
border-top-left-radius: 140px;
height: 300px !important;
margin: 10px;
margin-left: 30px;
/* margin-right: 20px; */
width: 401px !important;
}
.main-factory-image {
border-top-left-radius: 140px;
height: 300px;
margin-left: 5px;
}
}
/* ------------------------------------------ */
/* Base Styles (Optional Touchups) */
.cta-next-step-section {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: -120px !important;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.cta-next-step-section {
height: auto;
padding-top: 60px !important;
padding-bottom: 40px;
text-align: center;
}
.cta-next-step-section .cta-title {
font-size: 28px;
}
.cta-next-step-section .cta-desc {
font-size: 15px;
line-height: 1.6;
padding: 0 15px;
}
.cta-next-step-section .btn {
padding: 10px 20px;
font-size: 14px;
}
.cta-next-step-section img.consult-man {
width: 80%;
margin-top: 30px;
}
.cta-next-step-section .col-md-1 {
display: none;
}
.cta-next-step-section .col-md-6,
.cta-next-step-section .col-md-5 {
text-align: center !important;
/* margin-top: 20px !important; */
padding: 0 15px !important;
}
}
@media (max-width: 576px) {
.cta-next-step-section .cta-title {
font-size: 24px;
text-align: center !important;
}
.cta-next-step-section .cta-desc {
font-size: 14px;
}
.cta-next-step-section img.consult-man {
width: 100%;
margin-top: 20px;
}
.consult-man {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.3; /* Optional transparency */
}
}
/* ------------------------ */
.quality-compliance-section {
margin-top: 100px !important;
}
@media (max-width: 576px) {
.quality-compliance-section {
margin-top: 0px !important;
}
}
/* Default (desktop) */
.stp-img {
width: 85% !important;
margin-left: 65px !important;
}
/* Tablet and smaller */
@media (max-width: 768px) {
.stp-img {
width: 90% !important; /* take more space */
margin-left: auto !important;
/* ensures it centers */
}
}
/* Small mobile */
@media (max-width: 480px) {
.stp-img {
width: 100% !important; /* full width */
margin-left: auto !important;
}
}
.top-152 {
margin-top: 152px !important;
}
.iso-margin {
margin-left: 33px !important;
}
.location-margin {
margin-left: 10px !important;
}
/* Startup logo */
.startup-logo {
width: 200px;
height: 60px;
}
/* QR Code */
.qr-code {
width: 200px !important;
height: 200px !important;
transition: transform 0.3s ease;
}
/* Hover effect (optional) */
/* .qr-code:hover {
transform: scale(1.05);
} */
/* Mobile view adjustments */
@media (max-width: 768px) {
.startup-logo {
width: 160px;
height: auto;
}
.qr-code {
width: 90px;
height: 90px;
}
}
/* --------------------- */
/* Footer logos */
.footer-logo {
max-width: 200px;
margin-top: -20px;
}
/* Ensure logos wrap nicely on small screens */
@media (max-width: 768px) {
.logo-row {
flex-direction: column;
text-align: center;
}
.footer-logo {
max-width: 140px;
margin: 10px auto;
}
}
/* -------------------- */
/* Working Hours block */
.working-hours {
display: flex;
flex-direction: column;
align-items: center; /* center the whole block */
padding-left: 0 !important;
}
.working-hours h5,
.working-hours p {
text-align: left; /* keep text left aligned */
width: 100%; /* ensures left alignment works */
max-width: 250px; /* optional: limits text width for neat look */
}
/* Mobile spacing */
@media (max-width: 768px) {
.working-hours {
margin-top: 20px;
margin-left: 62px;
}
}