/* COLORS & FONTS */
:root {
--red: #121625;
--black: #0d0d0d;
--white: #ffffff;
--gray-dark: #1a1a1a;
--gray-light: #333;
--blue-dark: #121625;
--accent: #f39c12;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--white);
overflow-x: hidden;
}
p {
margin-bottom: 0px;
color: #ffffff;
}
.under-h2 {
font-family: 'Oxanium', sans-serif;
font-size: 42px;
font-weight: 700;
margin-bottom: 30px;
position: relative;
text-align: center;
color: #000;
}
@media (max-width: 992px) {
.under-h2 {
font-family: 'Oxanium', sans-serif;
font-size: 26px;
font-weight: 700;
margin-bottom: 30px;
position: relative;
text-align: center;
color: #000;
}
}
/* TOP HEADER */
.top-header {
background: var(--black);
padding: 10px 0;
font-size: 13px;
}
.social-icons i {
margin-left: 15px;
color: var(--white);
cursor: pointer;
transition: color 0.3s ease;
}
.social-icons i:hover {
color: var(--red);
}
/* MAIN HEADER */
.main-header {
background: #8f8f8f;
padding: 2px 0;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* LOGO */
.logo img {
width: 200px;
height: auto;
}
/* MENU */
.menu ul {
display: flex;
gap: 35px;
list-style: none;
align-items: center;
margin: 0;
padding: 0;
}
.menu ul li {
position: relative;
}
.menu ul li a {
color: var(--white);
text-decoration: none;
font-size: 15px;
font-weight: 600;
font-family: "Oxanium", sans-serif;
transition: color 0.3s ease;
}
.menu ul li:hover a {
color: #f39c12;
}
.menu ul li:hover a {
color: #000000;
}
/* WHITE DOTS ON HOVER */
.menu ul li:hover .dots {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.dots {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%) translateY(5px);
opacity: 0;
display: flex;
gap: 4px;
transition: all 0.3s ease;
}
.dots::before,
.dots::after,
.dots div {
content: "";
width: 5px;
height: 5px;
background: var(--white);
border-radius: 50%;
}
/* DROPDOWN (Desktop) */
.dropdown-parent {
position: relative;
z-index: 999;
}
.dropdown-parent:hover .dropdown {
display: block !important;
}
.dropdown {
position: absolute;
display: none;
background: #ffffff;
padding: 15px 0;
width: 250px;
top: 100%;
left: 0;
color: #000000;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.dropdown li {
list-style: none;
}
.dropdown li a {
display: block;
padding: 10px 20px;
color: var(--black);
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}
.dropdown li:hover a {
background: #c49a6c;
color: #ffffff;
padding-left: 25px;
}
/* CONTACT BUTTON */
.contact-btn-header {
background: linear-gradient(135deg, var(--red), #7a0303);
color: var(--white);
padding: 3px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 2px;
border: 1px solid var(--accent);
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(224, 0, 0, 0.3);
}
/* CONTACT BUTTON */
.contact-btn-header-big {
background: linear-gradient(135deg, var(--red), #7a0303);
color: var(--white);
padding: 14px 50px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: "Oxanium", sans-serif;
align-items: center;
gap: 2px;
border: 1px solid var(--accent);
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(224, 0, 0, 0.3);
}
.contact-btn-header-big:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(224, 0, 0, 0.5);
background: linear-gradient(135deg, #cc0000, var(--red));
color: var(--white);
}
.contact-btn-header:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(224, 0, 0, 0.5);
background: linear-gradient(135deg, #cc0000, var(--red));
color: var(--white);
}
.phone-icon {
width: 36px;
height: 36px;
}
.contact-btn-header i {
font-size: 18px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
/* MOBILE MENU ICON */
.mobile-menu-icon {
display: none;
font-size: 28px;
color: var(--white);
cursor: pointer;
transition: color 0.3s ease;
}
.mobile-menu-icon:hover {
color: var(--accent);
}
/* HERO SECTION */
.hero {
height: 100vh;
position: relative;
background-color: #000;
}
/* FULL WIDTH SLIDER */
.slider-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.8s ease;
}
.hero-slide.active {
opacity: 1;
}
.overlay {
background: #0000008c;
position: absolute;
inset: 0;
}
/* TEXT BOX */
.text-box {
position: absolute;
left: 40px;
bottom: 220px;
max-width: 850px;
z-index: 10;
}
.text-box h1 {
font-family: "Oxanium", sans-serif;
font-size: 52px;
font-weight: 600;
color: var(--white);
line-height: 1.2;
margin-bottom: 20px;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); */
}
.text-box h1 span {
color: var(--red);
}
.text-box p {
margin-top: 15px;
font-size: 18px;
font-family: "Poppins", sans-serif;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
/* RIGHT FORM - OVERLAY */
.contact-form-box {
position: absolute;
right: 30px;
top: 50%;
/* Changed to 50% for better vertical alignment relative to hero */
transform: translateY(-50%);
width: 400px;
background: rgba(255, 255, 255, 3%);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px 30px 15px 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 10;
}
/* FORM ROWS */
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.form-row .form-group.full-width {
flex: 1;
}
.contact-form-box h3 {
font-size: 24px;
font-family: "Oxanium", sans-serif;
margin-bottom: 20px;
font-weight: 600;
color: var(--white);
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea {
width: 100%;
padding: 7px 15px;
margin-bottom: 5px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
border-radius: 8px;
font-size: 12px;
transition: all 0.3s ease;
}
.contact-form-box input:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus {
outline: none;
border-color: var(--red);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 10px rgba(224, 0, 0, 0.3);
}
.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder {
color: rgb(255, 255, 255);
}
.contact-form-box textarea {
resize: vertical;
min-height: 100px;
}
.submit-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, var(--red), #cc0000);
color: var(--white);
border: 1px solid #ffffff91;
/* border-radius: 8px; */
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
background: linear-gradient(135deg, #cc0000, var(--red));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(224, 0, 0, 0.4);
}
/* ================= MOBILE RESPONSIVE FIXES ================= */
@media (max-width: 992px) {
.menu {
display: none;
}
.mobile-menu-icon {
display: block;
}
.hero {
height: auto;
min-height: 100vh;
}
.slider-container {
width: 100%;
height: 70vh;
position: relative;
}
/* Adjusted form position for tablet/small desktop */
.contact-form-box {
position: relative;
right: auto;
top: auto;
transform: none;
width: calc(100% - 40px);
margin: -50px 20px 30px 20px;
/* Bring it up over the slider slightly */
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-row .form-group {
margin-bottom: 15px;
}
.text-box {
left: 20px;
right: 20px;
max-width: none;
bottom: 30px;
}
.text-box h1 {
font-size: 36px;
}
.text-box p {
font-size: 16px;
}
}
@media (max-width: 576px) {
.top-header {
text-align: center;
display: none;
}
.top-header .container {
flex-direction: column;
gap: 10px;
}
.phone-icon {
width: 26px;
height: 24px;
}
.contact-btn-header {
padding: 4px 12px;
font-size: 12px;
}
.contact-btn-header i {
font-size: 13px;
}
.mobile-menu-icon {
font-size: 24px;
}
.main-header .container {
padding: 5px 15px;
}
.logo img {
width: 120px;
}
.text-box {
left: 15px;
/* Adjusted left position */
right: 15px;
bottom: 20px;
}
.text-box h1 {
font-size: 28px;
}
.text-box p {
font-size: 14px;
}
.slider-container {
height: 32vh;
}
.contact-form-box {
/* Adjusted margin for smaller screens */
margin: 30px 15px 20px 15px;
padding: 20px;
}
.contact-form-box h3 {
font-size: 20px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-row .form-group {
margin-bottom: 15px;
}
}
/* ================= Mobile Menu Styles FIX ================= */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
/* Starts from left */
width: 280px;
/* Fixed width for a side menu */
max-width: 80%;
height: 100vh;
background: #8f8f8f;
z-index: 9999;
display: flex;
/* Use flex to control internal elements */
flex-direction: column;
padding: 20px;
/* Added padding */
transform: translateX(-100%);
/* Hides it off-screen */
transition: transform 0.3s ease;
}
.mobile-menu.active {
transform: translateX(0);
/* Slides into view */
}
.mobile-menu-close {
position: absolute;
top: 15px;
right: 15px;
font-size: 28px;
color: var(--white);
cursor: pointer;
}
.mobile-menu ul {
list-style: none;
text-align: left;
/* Aligns links to the left */
margin-top: 50px;
/* Space from close button */
padding: 0;
width: 100%;
}
@media (max-width: 576px) {
.mobile-menu ul {
list-style: none;
text-align: left;
/* Aligns links to the left */
margin-top: 0px;
/* Space from close button */
padding: 0px 10px;
width: 100%;
}
}
.mobile-menu ul li {
margin: 10px 0;
width: 100%;
}
.mobile-menu ul li a {
color: #000;
text-decoration: none;
font-size: 16px;
font-weight: 500;
transition: color 0.3s ease;
font-family: "Oxanium", sans-serif;
padding: 8px 0;
display: block;
/* Makes the whole area clickable */
}
.mobile-menu ul li a:hover {
color: #444;
}
/* Mobile Dropdown Styling */
.mobile-dropdown-menu {
list-style: none;
padding-left: 15px;
/* Indent for sub-links */
margin-top: 5px;
background: rgba(255, 255, 255, 0.05);
/* Light background for visibility */
border-left: 2px solid var(--red);
overflow: hidden;
/* Important for showing/hiding with JS */
}
.mobile-dropdown-menu li {
margin: 0;
}
.mobile-dropdown-menu li a {
font-size: 14px;
font-weight: 400;
padding: 5px 0;
}
.mobile-dropdown-toggle i {
transition: transform 0.3s ease;
}
.mobile-dropdown-toggle.active i {
transform: rotate(180deg);
}
/* Animation for slide-in is now handled by the transition property on .mobile-menu */
@keyframes slideIn {
/* Removed, replaced by CSS transition on transform */
}
/* Success Message */
.success-message {
position: fixed;
top: 100px;
right: -450px;
/* Increased slightly to ensure it's off-screen */
background: linear-gradient(135deg, #27ae60, #2ecc71);
color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(39, 174, 96, 0.4);
z-index: 10000;
transition: right 0.5s ease-in-out, opacity 0.3s ease;
max-width: 350px;
display: none;
/* Hide by default */
opacity: 0;
}
.success-message.show {
display: block;
right: 20px;
opacity: 1;
}
.success-message h4 {
margin: 0 0 10px 0;
font-size: 18px;
}
.success-message p {
margin: 0;
font-size: 14px;
}
.success-message .close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
cursor: pointer;
color: white;
}
/* ABOUT SECTION */
.about-section {
padding: 10px 0;
overflow: hidden;
}
/* LEFT CONTENT */
.about-tag {
font-size: 1rem;
color: #7a0303;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
position: relative;
display: inline-block;
font-family: "Poppins", sans-serif;
}
.about-tag:before {
content: '';
position: absolute;
top: 50%;
left: -30px;
width: 20px;
height: 2px;
background-color: #ffff00;
transform: translateY(-50%);
}
.about-tag:after {
content: '';
position: absolute;
top: 50%;
right: -15px;
width: 8px;
height: 8px;
border: 2px solid #ffff00;
transform: translateY(-50%) rotate(45deg);
}
.about-heading h2 {
font-size: 52px;
font-weight: 700;
margin-bottom: 20px;
color: #000;
font-family: "Oxanium", sans-serif;
}
.red-highlight {
color: #000000;
font-weight: 600;
text-transform: uppercase;
display: block;
margin-bottom: 20px;
font-family: "Poppins", sans-serif;
}
.legislation-text {
line-height: 1.6;
margin-bottom: 40px;
color: #2e2e2e;
font-family: "Poppins", sans-serif;
}
/* ABOUT SECTION - PLAIN BULLETED SERVICES LIST STYLES */
.services-list {
/* Flexbox setup for two-column layout */
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
gap: 15px 0;
/* Vertical gap between rows */
}
.services-list .service-item {
/* Set width to 50% for a clean two-column layout (2 items per row) */
width: 50%;
/* Display flex to align icon and text */
display: flex;
/* KEY CHANGE 1: Using flex-start for consistent alignment at the beginning of the text */
align-items: flex-start;
margin-bottom: 0;
font-weight: 500;
color: #333;
font-size: 16px;
line-height: 1.5;
}
.services-list .service-item:hover {
/* Set width to 50% for a clean two-column layout (2 items per row) */
width: 50%;
/* Display flex to align icon and text */
display: flex;
/* KEY CHANGE 1: Using flex-start for consistent alignment at the beginning of the text */
align-items: flex-start;
margin-bottom: 0;
font-weight: 500;
color: #7a0303;
font-size: 16px;
line-height: 1.5;
cursor: pointer;
}
.services-list .service-item i {
/* Icon styling for size and position */
color: #cc0000;
/* Red Shield Icon Color */
/* Font size for the shield icon */
font-size: 1.0rem;
/* KEY CHANGE 2: Manually adjust margin-top to bring the icon down to the start of the text */
/* हमने margin-top को 5px से बढ़ाकर 7px किया है ताकि यह टेक्स्ट के साथ बेहतर अलाइन हो। */
margin-top: 7px;
margin-right: 10px;
/* Space between shield and text */
/* Prevents the icon from getting squashed */
flex-shrink: 0;
}
/* RESPONSIVENESS: Switch to a single column on smaller screens */
@media (max-width: 768px) {
.services-list .service-item {
width: 100%;
}
.about-tag {
font-size: 14px;
color: #7a0303;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
position: relative;
display: inline-block;
font-family: "Poppins", sans-serif;
}
}
/* BUTTON */
.check-services-btn {
padding: 10px 30px;
border: 2px solid #cc0000;
color: #cc0000;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
text-transform: uppercase;
}
.check-services-btn:hover {
background-color: #cc0000;
color: #fff;
}
/* RIGHT IMAGE SIDE */
.right-image-block {
position: relative;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.image-container {
width: 80%;
height: 100%;
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* VERTICAL TEXT */
.vertical-text {
position: absolute;
top: 50%;
right: -80px;
transform: translateY(-50%) rotate(90deg);
font-size: 9rem;
font-weight: 900;
color: #d3d3d3;
letter-spacing: 5px;
}
/* ANIMATIONS */
.fade-up {
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s ease forwards;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.zoom-in {
opacity: 0;
transform: scale(0.95);
animation: zoomIn 1s ease forwards;
}
@keyframes zoomIn {
to {
opacity: 1;
transform: scale(1);
}
}
/* RESPONSIVE */
@media (max-width: 991px) {
.vertical-text {
display: none;
}
.right-image-block {
height: auto;
padding: 0;
display: block;
}
.image-container {
width: 100%;
height: auto;
margin: 0;
}
.image-container img {
width: 100%;
height: auto;
margin-top: 0;
border-radius: 12px;
display: block;
}
.about-section {
padding: 40px 0px 10px 0px;
}
.about-heading h2 {
font-size: 27px;
font-weight: 700;
margin-bottom: 20px;
color: #000;
font-family: "Oxanium", sans-serif;
}
}
.core-services {
padding: 80px 80px;
background: #fff;
text-align: center;
position: relative;
}
.top-heading p {
color: var(--blue-dark);
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
letter-spacing: 1px;
font-family: 'Poppins', sans-serif;
}
.top-heading h2 {
font-size: 52px;
font-weight: 700;
margin-bottom: 40px;
color: #000000;
font-family: "Oxanium", sans-serif;
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 4 in one row */
gap: 20px;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
.service-box {
padding: 20px 20px;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
border-radius: 10px;
}
.service-box img {
width: 130px;
height: auto;
border: 2px solid #7a0303;
border-radius: 100px;
padding: 2px;
margin-bottom: 20px;
}
.service-box h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
color: #000000;
font-family: "Oxanium", sans-serif;
}
.service-box p {
color: #2e2e2e;
font-size: 14px;
line-height: 1.6;
margin: 0 auto 25px;
font-family: 'Poppins', sans-serif;
}
.arrow-btn {
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 16px;
margin: 0 auto;
transition: 0.3s;
text-decoration: none;
gap: 8px;
}
.arrow-btn i {
transition: transform 0.3s ease;
}
.service-box:hover .arrow-btn i {
transform: translateX(5px);
}
.service-box:hover {
background: #f9f9f9;
}
.service-box:hover .arrow-btn {
border-color: #8ec63f;
color: #7a0303;
font-size: 17px;
font-weight: 600;
}
/* RESPONSIVE */
@media (max-width: 992px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
/* 2 per row */
}
}
@media (max-width: 600px) {
.services-grid {
grid-template-columns: 1fr;
/* 1 per row */
}
.core-services {
padding: 40px 10px;
background: #fff;
text-align: center;
position: relative;
}
.top-heading h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 40px;
color: #000000;
font-family: "Oxanium", sans-serif;
}
}
/* SECTION BACKGROUND */
.snapshot-section {
background: var(--blue-dark);
padding: 80px 70px;
position: relative;
}
/* GRID LAYOUT */
.snapshot-container {
display: grid;
grid-template-columns: 1.2fr 1fr;
align-items: center;
gap: 40px;
}
/* LEFT SIDE TEXT */
.small-title {
font-family: 'Poppins', sans-serif;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
margin-bottom: 10px;
font-weight: 500;
}
.main-title {
font-family: "Oxanium", sans-serif;
font-size: 40px;
font-weight: 700;
color: #ffffff;
margin-bottom: 35px;
line-height: 1.3;
}
.snapshot-feature {
display: flex;
align-items: start;
gap: 15px;
margin-bottom: 25px;
}
.snapshot-feature h3 {
font-size: 18px;
font-weight: 600;
font-family: "Oxanium", sans-serif;
color: #ffffff;
margin-bottom: 5px;
}
.snapshot-feature p {
font-size: 14px;
line-height: 1.6;
font-family: 'Poppins', sans-serif;
color: #e8e8e8;
}
/* ICON BOX */
.icon-box {
width: 38px;
height: 38px;
border: 1px solid #ffffff;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 18px;
}
.snapshot-left .fas {
font-weight: 900;
font-size: 24px;
border: 1px solid #ffc107;
padding: 10px;
border-radius: 8px;
}
/* RIGHT SIDE IMAGE */
.snapshot-right {
position: relative;
}
.snapshot-right img {
width: 100%;
border-radius: 8px;
}
/* STAT BOX */
.stats-box {
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
width: 85%;
background: #fff;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px;
padding: 20px 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
}
.stat h3 {
font-family: "Oxanium", sans-serif;
font-size: 22px;
font-weight: 700;
color: #000;
}
.stat p {
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #666;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.snapshot-container {
grid-template-columns: 1fr;
}
.stats-box {
position: relative;
bottom: 0;
left: 0;
transform: none;
width: 100%;
margin-top: 20px;
}
.main-title {
font-family: "Oxanium", sans-serif;
font-size: 30px;
font-weight: 700;
color: #ffffff;
margin-bottom: 35px;
line-height: 1.3;
}
.snapshot-section {
background: var(--blue-dark);
padding: 40px 20px;
position: relative;
margin-top: -50px;
}
}
/* =========================
WRAPPER WITH BACKGROUND AND OVERLAY
========================= */
.new-sec-new {
position: relative;
min-height: 800px;
overflow: hidden;
display: flex;
align-items: center;
}
/* Background Image Layer */
.new-sec-new:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('/assets/img/prkng-bg.webp') center/cover no-repeat;
z-index: -2;
}
/* Dark Overlay Layer */
.new-sec-new:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: -1;
}
/* =========================
GUARD IMAGE LAYER - BOTTOM LEFT
========================= */
.new-sec-new .guard-image-layer {
position: absolute;
left: 0;
bottom: 0;
z-index: 0;
width: 35%;
height: 100%;
}
.new-sec-new .guard-image-layer img {
position: absolute;
bottom: 0;
left: 0;
height: 600px;
width: auto;
object-fit: contain;
}
/* =========================
MAIN CONTENT - TEXT & GRID
========================= */
.new-sec-new .premises-section {
padding: 80px 0;
position: relative;
z-index: 10;
width: 100%;
color: #fff;
}
.new-sec-new .premises-right {
padding-left: 50px;
color: #fff;
position: relative;
}
.new-sec-new .premises-title {
font-size: 40px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
font-family: "Oxanium", sans-serif;
}
.new-sec-new .premises-desc {
width: 70%;
font-size: 16px;
opacity: 0.9;
margin-bottom: 30px;
font-family: "Poppins", sans-serif;
}
/* DISCOVER BUTTON */
.new-sec-new .discover-btn,
.new-sec-new .contact-btn-header-big {
background: #cc0000;
padding: 12px 35px;
color: #fff;
font-weight: 700;
text-decoration: none;
display: inline-block;
border-radius: 4px;
margin-bottom: 40px;
transition: 0.3s;
}
.new-sec-new .discover-btn:hover,
.new-sec-new .contact-btn-header-big:hover {
background: #ff3636;
}
/* =========================
ICON GRID - NEW CLASS FOR ICONS
========================= */
.new-sec-new .new-sec-icon-box {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding-top: 40px;
}
.new-sec-new .new-sec-icon-box .icon-item {
text-align: center;
color: white;
padding: 25px 10px;
transition: 0.4s ease;
cursor: pointer;
min-height: 140px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.new-sec-new .new-sec-icon-box .icon-item img {
height: 50px;
margin-bottom: 10px;
transition: transform 0.4s ease;
}
.new-sec-new .new-sec-icon-box .icon-item h4 {
font-size: 16px;
font-weight: 500;
margin: 0;
font-family: "Oxanium", sans-serif;
}
.new-sec-new .new-sec-icon-box .icon-item:hover {
background: #cc0000;
transform: scale(1.08);
}
.new-sec-new .new-sec-icon-box .icon-item:hover img {
transform: scale(1.15);
}
.new-sec-new .new-sec-icon-box .icon-item:nth-child(4n) {
border-right: none;
}
.new-sec-new .new-sec-icon-box .icon-item:nth-child(n+5) {
border-bottom: none;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 991px) {
.new-sec-new {
min-height: auto;
}
.new-sec-new .premises-title {
font-size: 27px;
font-weight: 900;
line-height: 1.3;
margin-bottom: 20px;
font-family: "Oxanium", sans-serif;
}
.new-sec-new .guard-image-layer {
display: none;
}
.new-sec-new .premises-section {
padding: 40px 0;
}
.new-sec-new .premises-right {
padding: 0 15px;
}
.new-sec-new .premises-desc {
width: 100%;
}
.new-sec-new .new-sec-icon-box {
grid-template-columns: repeat(2, 1fr);
}
.new-sec-new .new-sec-icon-box .icon-item {
border: none !important;
}
}
/* Base Layout and Header */
.testimonials-section {
width: 100%;
max-width: 1200px;
text-align: center;
padding: 70px 20px;
box-sizing: border-box;
margin: 0 auto;
}
.subtitle {
color: #f5c842;
/* Green */
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 5px;
font-family: 'Poppins', sans-serif;
}
.header h2 {
font-size: 52px;
font-weight: 700;
color: #000000;
margin: 0 0 40px 0;
font-family: "Oxanium", sans-serif;
}
/* Slider Mechanism */
.slider-track-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
padding: 20px 5px;
}
.testimonials-container {
display: flex;
justify-content: flex-start;
gap: 30px;
transition: transform 0.5s ease-in-out;
width: fit-content;
}
/* Individual Card Styling - PREMIUM DESIGN */
.testimonial-card {
/* Calculated width for 2 cards per view in a 1200px container */
width: calc((1200px - 30px) / 2 - 30px);
flex-shrink: 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 15px;
padding: 35px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
position: relative;
text-align: left;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid rgba(255, 193, 7, 0.2);
transition: all 0.3s ease;
overflow: hidden;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #7a0303, #ffc107);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(255, 193, 7, 0.1);
border-color: rgba(255, 193, 7, 0.4);
}
.stars {
color: #ffc107;
font-size: 1.1em;
margin-bottom: 15px;
display: flex;
gap: 3px;
}
.stars i {
filter: drop-shadow(0 2px 3px rgba(255, 193, 7, 0.3));
}
.quote {
color: #2e2e2e;
font-size: 15px;
line-height: 1.7;
margin-bottom: 20px;
flex-grow: 1;
font-family: 'Poppins', sans-serif;
font-style: italic;
}
.author {
color: #121625;
font-weight: 600;
font-size: 14px;
margin-top: auto;
font-family: 'Oxanium', sans-serif;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.quote-icon {
position: absolute;
bottom: 20px;
right: 30px;
font-size: 5em;
color: rgba(255, 193, 7, 0.08);
line-height: 1;
user-select: none;
font-family: Georgia, serif;
font-weight: 700;
}
/* Slider Controls Styling - UPDATED FOR ROUND RED BUTTONS */
.slider-controls {
margin-top: 30px;
margin-bottom: 20px;
}
.slider-btn {
/* New styles for a round, red button with glow effect */
width: 50px;
/* Adjust size as needed */
height: 50px;
/* Adjust size as needed */
background: linear-gradient(135deg, #7a0303 0%, #b20f0f 100%);
color: white;
border: none;
padding: 0;
/* Remove padding */
text-align: center;
text-decoration: none;
display: inline-flex;
/* Use flex to center the icon */
align-items: center;
justify-content: center;
font-size: 1.2em;
/* Icon size */
margin: 4px 10px;
cursor: pointer;
border-radius: 50%;
/* Make it perfectly round */
transition: all 0.3s;
box-shadow: 0 0 10px rgba(192, 57, 43, 0.5);
/* Soft outer glow */
outline: none;
/* Remove focus outline */
}
/* Hover and Active states for the new buttons */
.slider-btn:hover:not(:disabled) {
background-color: #e74c3c;
/* Brighter Red on hover */
box-shadow: 0 0 15px rgba(231, 76, 60, 0.7);
}
.slider-btn:active:not(:disabled) {
transform: scale(0.98);
}
/* Disabled state */
.slider-btn:disabled {
background-color: #ccc;
color: #666;
box-shadow: none;
/* Remove glow when disabled */
cursor: not-allowed;
}
/* Dots Styling */
.dots {
margin-top: 20px;
}
.dot {
height: 10px;
width: 10px;
background-color: #ddd;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
.dot.active {
background-color: #f5c842;
}
/* Media Query for responsiveness */
@media (max-width: 900px) {
.testimonial-card {
/* Show only 1 card on smaller screens */
width: calc(100vw - 60px);
max-width: 500px;
}
.header h2 {
font-size: 32px;
font-weight: 700;
color: #000000;
margin: 0 0 40px 0;
font-family: "Oxanium", sans-serif;
}
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Note: Ensure you have linked Font Awesome for icons (fas) */
/* Example: */
/* ========== WHY C2S SECTION (my-why-sec) ========== */
.my-why-sec {
padding: 100px 20px;
/* Deep Navy/Dark Background */
background: #ffffff;
font-family: 'Poppins', sans-serif;
}
.c2s-content-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 60px;
align-items: center;
}
/* --- Left Column: Header and Intro --- */
.why-header-col {
flex: 1;
max-width: 50%;
}
.header-content h2 {
/* Text Color */
color: #000000;
font-family: 'Oxanium', sans-serif;
font-size: 40px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.2;
}
.header-underline {
/* Bright Orange Accent */
width: 80px;
height: 2px;
background: #ff8c00;
margin-bottom: 25px;
margin-left: 90px;
}
.header-content p {
/* Muted Text Color */
color: #cccccc;
font-size: 16px;
font-family: 'Poppins', sans-serif;
line-height: 1.7;
margin-bottom: 30px;
}
.cta-button {
display: inline-block;
padding: 12px 30px;
background: #ff8c00;
/* Bright Orange */
color: #121625;
/* Dark text for contrast */
text-decoration: none;
font-weight: 600;
border-radius: 5px;
transition: background 0.3s ease;
}
.cta-button:hover {
background: #e67e00;
}
/* Note: Ensure you have linked Font Awesome for icons (fas) */
/* Example: */
/* ========== WHY C2S SECTION (my-why-sec) ========== */
.my-why-sec {
padding: 100px 20px;
/* Deep Navy/Dark Background */
background: #ffffff;
font-family: 'Poppins', sans-serif;
}
.c2s-content-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 60px;
align-items: center;
}
/* --- Left Column: Header and Intro --- */
.why-header-col {
flex: 1;
max-width: 50%;
}
.header-content h2 {
/* Text Color */
color: #000000;
font-family: 'Oxanium', sans-serif;
font-size: 40px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.2;
}
.header-underline {
/* Bright Orange Accent */
width: 80px;
height: 2px;
background: #ff8c00;
margin-bottom: 25px;
}
.header-content p {
/* Muted Text Color */
color: #2e2e2e;
font-size: 16px;
line-height: 1.7;
margin-bottom: 30px;
}
.cta-button {
display: inline-block;
padding: 12px 30px;
background: #ff8c00;
/* Bright Orange */
color: #121625;
/* Dark text for contrast */
text-decoration: none;
font-weight: 600;
border-radius: 5px;
transition: background 0.3s ease;
}
.cta-button:hover {
background: #e67e00;
}
/* --- Right Column: Benefits Checklist --- */
.why-benefits-col {
flex: 1;
max-width: 50%;
/* Slightly lighter dark background for the checklist container */
background: #f0f0f0;
padding: 30px 20px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.benefits-list {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 15px;
/* Light border bottom to separate items */
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 15px;
}
/* Remove border from last item */
.benefit-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.benefit-item i {
/* Orange Icon Color */
color: #7a0303;
font-size: 20px;
margin-top: 2px;
flex-shrink: 0;
/* Prevent icon from shrinking */
}
.benefit-item p {
color: #000000;
/* Light text */
font-size: 15px;
line-height: 1.5;
}
.benefit-item p strong {
font-weight: 600;
}
/* ===================================================
RESPONSIVE DESIGN
=================================================== */
/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
.c2s-content-container {
flex-direction: column;
/* Stacks columns vertically */
gap: 40px;
}
.why-header-col,
.why-benefits-col {
max-width: 100%;
text-align: center;
padding: 0 10px;
}
.header-content h2 {
font-size: 27px;
}
.header-underline {
margin: 0 auto 25px auto;
/* Center underline */
}
.why-benefits-col {
padding: 30px;
}
.benefit-item {
/* Align items left again in mobile view for cleaner checklist */
justify-content: flex-start;
align-items: center;
}
}
/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
.my-why-sec {
padding: 60px 15px;
}
.header-content h2 {
font-size: 30px;
}
.why-benefits-col {
padding: 20px;
}
.benefit-item {
gap: 10px;
}
.benefit-item p {
font-size: 15px;
}
}
.why-img {
width: 120px;
height: 120px;
}
.delighted-customers {
padding: 80px 20px;
background: #ffffff;
/* White background */
color: #000000;
/* Black text */
font-family: 'Poppins', sans-serif;
}
.delighted-customers .main-heading {
font-size: 52px;
font-weight: 700;
margin-bottom: 60px;
letter-spacing: 1px;
color: #000000;
position: relative;
font-family: 'Oxanium', sans-serif;
}
.delighted-customers .main-heading::after {
content: '';
display: block;
width: 80px;
height: 2px;
background: #7a0303;
margin: 15px auto 0;
border-radius: 2px;
}
.customer-grid {
display: flex;
justify-content: center;
/* Center the columns */
gap: 30px;
flex-wrap: wrap;
max-width: 1300px;
margin: auto;
}
.customer-col {
background: #f9f9f9;
/* Light gray card */
border-radius: 12px;
padding: 30px 25px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
flex: 1 1 300px;
/* Responsive card width */
max-width: 380px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: start;
}
.customer-col:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.customer-col h3 {
font-size: 22px;
font-weight: 700;
color: #7a0303;
/* Dark red heading */
margin-bottom: 20px;
text-align: center;
font-family: 'Oxanium', sans-serif;
}
.customer-col ul {
list-style: none;
/* Remove default bullets */
padding-left: 0;
}
.customer-col ul li {
font-size: 16px;
line-height: 26px;
margin-bottom: 12px;
color: #000000;
font-family: 'Poppins', sans-serif;
position: relative;
padding-left: 28px;
/* Space for icon */
}
/* Custom red icon before each li */
.customer-col ul li::before {
font-family: "Font Awesome 5 Free";
content: "\f3ed";
font-weight: 900;
position: absolute;
left: 0;
top: 0;
color: #7a0303;
/* Red color */
font-size: 16px;
line-height: 1.2;
}
/* Responsive */
@media (max-width: 1000px) {
.customer-grid {
gap: 20px;
}
}
@media (max-width: 768px) {
.customer-grid {
flex-direction: column;
align-items: center;
}
.customer-col {
max-width: 90%;
/* Same width on mobile */
flex: none;
/* Prevent flex shrink */
}
}
/* MAIN SECTION */
.delighted-customer-sec {
background: #121625;
padding: 80px 10%;
color: #fff;
font-family: 'Poppins', sans-serif;
}
/* MAIN HEADING */
.dc-heading {
text-align: center;
font-size: 52px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 60px;
font-family: 'Oxanium', sans-serif;
}
/* 2 COLUMNS LAYOUT */
.dc-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
/* COLUMN TITLES */
.dc-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
color: #f5c842;
/* GOLD COLOR */
font-family: 'Oxanium', sans-serif;
}
/* LIST STYLE */
.dc-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.dc-col ul li {
font-size: 16px;
margin-bottom: 12px;
position: relative;
padding-left: 28px;
font-family: 'Poppins', sans-serif;
}
/* SHIELD ICON BULLET */
.dc-col ul li::before {
content: "\f3ed";
/* Font Awesome Shield Icon */
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 1px;
font-size: 14px;
color: #f5c842;
/* GOLD */
}
/* RESPONSIVE */
@media (max-width: 768px) {
.dc-row {
grid-template-columns: 1fr;
gap: 40px;
}
.dc-heading {
font-size: 27px;
}
}
/* ---------- Container ---------- */
.delighted-customers {
background: #fff;
padding: 60px 0 90px;
text-align: center;
font-family: sans-serif;
}
.delighted-customers .main-heading {
font-size: 52px;
font-weight: 700;
margin-bottom: 30px;
color: #000;
font-family: 'Oxanium', sans-serif;
}
@media (max-width: 720px) {
.delighted-customers .main-heading {
font-size: 27px;
}
}
/* Carousel Box */
.logo-carousel {
position: relative;
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
.logo-window {
overflow: hidden;
padding: 10px 0;
}
.logo-track {
display: flex;
gap: 40px;
transition: transform 0.45s cubic-bezier(.22, .98, .28, 1);
}
/* Logo Item */
.logo-item {
min-width: 180px;
/* desktop size per logo */
height: 110px;
display: flex;
justify-content: center;
align-items: center;
}
.logo-item img {
width: 160px;
object-fit: contain;
transition: .25s;
}
.logo-item:hover img {
transform: scale(1.05);
}
/* Radio Buttons */
.logo-carousel input[type="radio"] {
display: none;
}
/* -------------------------
SLIDE DISTANCE FIXED
Moves 220px + 40 gap = 260px per click
------------------------- */
/* Slide 1 */
#slide-1:checked~.logo-window .logo-track {
transform: translateX(0px);
}
/* Slide 2 */
#slide-2:checked~.logo-window .logo-track {
transform: translateX(-220px);
}
/* Slide 3 */
#slide-3:checked~.logo-window .logo-track {
transform: translateX(-440px);
}
/* Slide 4 */
#slide-4:checked~.logo-window .logo-track {
transform: translateX(-660px);
}
/* Slide 5 */
#slide-5:checked~.logo-window .logo-track {
transform: translateX(-880px);
}
/* Slide 6 */
#slide-6:checked~.logo-window .logo-track {
transform: translateX(-1100px);
}
/* Slide 7 */
#slide-7:checked~.logo-window .logo-track {
transform: translateX(-1320px);
}
/* Slide Controls Buttons */
.carousel-controls {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -35px;
display: flex;
gap: 18px;
}
.prev-container,
.next-container {
width: 48px;
height: 48px;
position: relative;
}
.carousel-btn {
position: absolute;
width: 48px;
height: 48px;
border-radius: 40px;
background: linear-gradient(135deg, #7a0303, #b20f0f);
color: #fff;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
opacity: .45;
pointer-events: none;
transition: .3s;
}
.carousel-btn:hover {
transform: scale(1.05);
}
/* BUTTON LOGIC */
#slide-1:checked~.carousel-controls .next-1,
#slide-2:checked~.carousel-controls .next-2,
#slide-3:checked~.carousel-controls .next-3,
#slide-4:checked~.carousel-controls .next-4,
#slide-5:checked~.carousel-controls .next-5,
#slide-6:checked~.carousel-controls .next-6 {
opacity: 1;
pointer-events: auto;
}
#slide-2:checked~.carousel-controls .prev-1,
#slide-3:checked~.carousel-controls .prev-2,
#slide-4:checked~.carousel-controls .prev-3,
#slide-5:checked~.carousel-controls .prev-4,
#slide-6:checked~.carousel-controls .prev-5,
#slide-7:checked~.carousel-controls .prev-6 {
opacity: 1;
pointer-events: auto;
}
/* RESPONSIVE */
@media (max-width: 1100px) {
.logo-item {
min-width: 140px;
}
/* adjust translation distances for smaller screens */
#slide-2:checked~.logo-window .logo-track {
transform: translateX(-160px);
}
#slide-3:checked~.logo-window .logo-track {
transform: translateX(-320px);
}
#slide-4:checked~.logo-window .logo-track {
transform: translateX(-480px);
}
#slide-5:checked~.logo-window .logo-track {
transform: translateX(-640px);
}
#slide-6:checked~.logo-window .logo-track {
transform: translateX(-800px);
}
#slide-7:checked~.logo-window .logo-track {
transform: translateX(-960px);
}
}
@media (max-width: 720px) {
.logo-item {
min-width: 120px;
}
/* adjust translation distances for mobile */
#slide-2:checked~.logo-window .logo-track {
transform: translateX(-140px);
}
#slide-3:checked~.logo-window .logo-track {
transform: translateX(-280px);
}
#slide-4:checked~.logo-window .logo-track {
transform: translateX(-420px);
}
#slide-5:checked~.logo-window .logo-track {
transform: translateX(-560px);
}
#slide-6:checked~.logo-window .logo-track {
transform: translateX(-700px);
}
#slide-7:checked~.logo-window .logo-track {
transform: translateX(-840px);
}
}
/* --- Custom Styles (Add these to your main stylesheet) --- */
.presence-section {
/* Background color to match your image */
background-color: #ffffff;
color: #000000;
/* Light text color */
}
/* --- Map Container --- */
.map-container {
/* Enforce max dimensions as requested (500x500) */
max-width: 500px;
max-height: 500px;
width: 100%;
/* Optional: Add a subtle glow/border effect if desired */
/* border: 1px solid #ffc107; */
border-radius: 5px;
overflow: hidden;
}
.map-image {
/* img-fluid (Bootstrap) ensures responsiveness */
display: block;
height: auto;
/* Allow height to adjust naturally */
}
/* --- Content Styling --- */
.presence-content {
padding-left: 30px;
/* Space between map and text */
}
.presence-heading {
font-size: 38px;
font-weight: 600;
margin-bottom: 30px;
border-bottom: 4px solid #ffc107;
/* Orange/Yellow underline */
display: inline-block;
padding-bottom: 10px;
font-family: 'Oxanium', sans-serif;
}
.location-list {
display: grid;
gap: 20px;
}
.location-item {
display: flex;
align-items: center;
gap: 15px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.location-item i {
/* Icon color matching the map's accent colors */
color: #ffc107;
font-size: 22px;
}
.location-item p {
margin: 0;
font-size: 20px;
font-weight: 500;
font-family: 'Oxanium', sans-serif;
}
/* --- Button Styling --- */
.btn-outline-warning {
/* Custom button styling if needed */
border-color: #ffc107;
color: #ffc107;
transition: all 0.3s ease;
}
.btn-outline-warning:hover {
background-color: #ffc107;
color: #000000;
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
.map-container {
max-width: 100%;
/* Full width on mobile/tablet */
}
.presence-content {
padding-left: 30px;
text-align: center;
}
.presence-heading {
margin-top: 20px;
border-bottom: none;
/* Optional: remove underline on small screens */
}
.location-list {
max-width: 400px;
/* Center content on mobile */
margin: 0 auto;
}
}
/* Note: Replace 'path/to/your/image.jpg' with the actual path or URL of your background image. */
.hero-security-section {
/* Set the background image and cover the area */
background-image: url('/assets/img/cta-bggg.webp');
/* REPLACE THIS PATH */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Set dimensions and relative positioning for the overlay */
height: 600px;
/* Adjust height as needed */
width: 100%;
position: relative;
display: flex;
align-items: center;
/* Vertically center content */
padding-left: 10%;
/* General padding for content area */
box-sizing: border-box;
}
/* Green Overlay for the fading effect */
/* Dark Blue/Black Overlay for the fading effect */
.hero-security-section .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Gradient: Dark blue/black (#121625) to transparent */
background: linear-gradient(to right, rgb(18 22 37 / 94%),
/* Dark blue/black, 80% opacity */
rgb(18 22 37 / 47%) 50%,
/* Medium dark blue/black, 50% opacity */
rgba(18, 22, 37, 0.1) 80%,
/* Light dark blue/black, 10% opacity */
transparent 100%
/* Fully transparent on the right */
);
z-index: 1;
}
/* Content Container to hold text and button */
.hero-security-section .content-container {
position: relative;
z-index: 2;
/* Ensure content is above the overlay */
color: white;
/* Default text color */
max-width: 600px;
/* Constrain the text width */
text-align: left;
}
/* Text Styling */
.hero-security-section .pre-heading {
font-size: 0.85em;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 5px;
color: #f0f0f0;
/* Light gray */
}
.hero-security-section .heading {
font-size: 40px;
/* Large heading size */
font-weight: 700;
line-height: 1.2;
margin-top: 0;
margin-bottom: 20px;
color: white;
font-family: 'Oxanium', sans-serif;
}
.hero-security-section .sub-text {
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 30px;
color: #e0e0e0;
/* Slightly lighter text for readability */
}
/* Contact Button Styling */
.hero-security-section .contact-button {
display: inline-block;
padding: 15px 35px;
background-color: #ffffff;
/* White background */
color: #333;
/* Dark text color */
text-decoration: none;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
border: 2px solid #ffffff;
}
.hero-security-section .contact-button:hover {
background-color: transparent;
/* Transparent background on hover */
color: white;
/* White text on hover */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-security-section {
height: 450px;
padding: 0 5%;
text-align: center;
justify-content: center;
/* Center content horizontally */
}
.hero-security-section .content-container {
max-width: 90%;
text-align: center;
}
.hero-security-section .heading {
font-size: 2em;
}
/* Adjust gradient for smaller screens */
.hero-security-section .overlay {
background: linear-gradient(to bottom,
rgba(51, 102, 51, 0.8),
rgba(51, 102, 51, 0.5) 50%,
rgba(51, 102, 51, 0.3) 100%);
}
}
/* CTA SECTION */
.cta-sec {
position: relative;
width: 100%;
height: 350px;
background: url('/assets/img/cta-bg.jpg') center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
}
.cta-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.cta-content {
position: relative;
z-index: 2;
max-width: 800px;
color: #fff;
}
.cta-content h2 {
font-size: 45px;
font-weight: 700;
margin-bottom: 18px;
font-family: 'Oxanium', sans-serif;
}
.cta-content p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}
/* BUTTON */
.cta-btn {
display: inline-block;
padding: 14px 36px;
font-size: 18px;
font-weight: 700;
color: #fff;
border-radius: 50px;
background: linear-gradient(45deg, #7a0303, #a10404);
text-decoration: none;
transition: 0.3s ease;
}
.cta-btn:hover {
transform: scale(1.07);
box-shadow: 0 8px 20px rgba(122, 3, 3, 0.4);
}
/* Footer Wrapper */
.main-footer {
background: #0a0a0a;
color: #fff;
padding: 60px 0 20px;
font-family: 'Poppins', sans-serif;
}
.footer-content-wrapper {
max-width: 1300px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
}
/* Columns */
.footer-col {
flex: 1 1 250px;
}
/* Logo */
.footer-logo {
width: 205px;
margin-bottom: 15px;
}
.company-desc {
color: #ddd;
line-height: 1.6;
font-size: 15px;
}
/* Headings */
.footer-col h3 {
font-size: 20px;
margin-bottom: 15px;
font-family: 'Oxanium', sans-serif;
color: #fff;
}
/* Links */
.footer-col a {
display: block;
color: #ddd;
text-decoration: none;
margin-bottom: 10px;
transition: 0.3s ease;
font-size: 15px;
}
.footer-col a i {
margin-right: 8px;
font-size: 14px;
color: #f5c842;
}
.footer-col a:hover {
color: #f5c842;
transform: translateX(3px);
}
/* Contact */
.contact-item {
display: flex;
align-items: center;
margin-bottom: 12px;
gap: 10px;
}
.contact-item i {
width: 22px;
font-size: 16px;
color: #f5c842;
}
.contact-item p {
margin: 0;
font-size: 15px;
color: #ddd;
}
/* Divider Line */
.footer-divider {
width: 100%;
height: 1px;
background: #333;
margin: 15px 0;
}
/* Bottom Bar */
.footer-bottom-v2 {
text-align: center;
display: flex;
justify-content: space-around;
}
.footer-bottom-v2 p {
margin: 5px 0;
color: #bbb;
font-size: 13px;
}
.synergy-link {
color: #f5c842;
text-decoration: none;
font-weight: 600;
}
.synergy-link:hover {
text-decoration: underline;
}
@media (max-width: 576px) {
.main-footer {
background: #0a0a0a;
color: #fff;
padding: 20px;
font-family: 'Poppins', sans-serif;
}
.footer-bottom-v2 {
text-align: center;
display: block;
}
}
/* Right Floating Bar */
.right-floating-bar {
position: fixed;
right: 0;
top: 35%;
width: 40px;
background: #7a0303;
padding: 22px 0;
border-radius: 30px 0 0 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
z-index: 99999;
}
/* Each Icon Button */
.floating-icon {
position: relative;
width: 36px;
height: 36px;
border-radius: 6px;
border-bottom: 1px solid #ffffff60;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
transition: 0.35s ease;
}
/* Icon Size */
.right-floating-bar i {
font-size: 20px !important;
}
/* Hover Effect */
.floating-icon:hover {
background: #ffffff;
color: #7a0303;
transform: scale(1.15);
}
/* ===========================================
PREMIUM GLASS EFFECT SLIDE LABEL (UPDATED)
=========================================== */
.floating-icon::after {
content: attr(data-label);
position: absolute;
right: 50px;
padding: 4px 16px;
font-size: 11px;
font-weight: 400;
border-radius: 8px;
/* Glassmorphism Effect */
background: #7a0303;
backdrop-filter: blur(8px);
color: #ffffff;
white-space: nowrap;
opacity: 0;
transform: translateX(20px) scale(0.95);
pointer-events: none;
transition: all 0.35s ease;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* Arrow Style */
.floating-icon::before {
content: "";
position: absolute;
right: 44px;
width: 10px;
height: 5px;
background: #7a0303;
backdrop-filter: blur(8px);
border-left: 1px solid rgba(255, 255, 255, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.25);
transform: rotate(45deg) translateX(8px);
opacity: 0;
transition: all 0.35s ease;
}
/* Show on Hover */
.floating-icon:hover::after,
.floating-icon:hover::before {
opacity: 1;
transform: translateX(0) scale(1);
}
/* Mobile View */
@media (max-width: 768px) {
.right-floating-bar {
right: 0px;
width: 50px;
padding: 12px 0;
}
.floating-icon {
width: 40px;
height: 40px;
}
.right-floating-bar i {
font-size: 20px !important;
}
}
/* =========================
ABOUT HERO SECTION
========================= */
.abt-hero {
width: 100%;
height: 200px;
position: relative;
background: url('/assets/img/trnggggg.webp') no-repeat center center/cover;
display: flex;
align-items: center;
padding-left: 60px;
}
/* Overlay */
.abt-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgb(18 22 37 / 94%),
/* Dark blue/black, 80% opacity */
rgb(18 22 37 / 95%) 50%,
/* Medium dark blue/black, 50% opacity */
rgba(18, 22, 37, 0.1) 80%,
/* Light dark blue/black, 10% opacity */
transparent 100%
/* Fully transparent on the right */
);
z-index: 1;
}
/* Text */
.abt-hero-content {
position: relative;
z-index: 2;
}
.abt-hero h1 {
font-family: "Oxanium", sans-serif;
font-size: 36px;
color: #ffffff;
font-weight: 700;
margin: 0;
}
/* =========================
Responsive Design
========================= */
@media (max-width: 768px) {
.abt-hero {
height: 240px;
padding-left: 30px;
}
.abt-hero h1 {
font-size: 32px;
}
}
@media (max-width: 480px) {
.abt-hero {
height: 100px;
padding-left: 20px;
}
.abt-hero h1 {
font-size: 20px;
}
}
/* MAIN WRAPPER */
.about_experience_main_container {
width: 100%;
padding: 70px 10%;
background: #ffffff;
color: #000000;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
}
/* LEFT TEXT CONTENT */
.about-exp-content {
width: 50%;
}
.about-exp-content h2 {
font-size: 36px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
font-family: "Oxanium", sans-serif;
}
.about-exp-content p {
font-size: 16px;
line-height: 1.7;
opacity: 0.95;
max-width: 500px;
font-family: 'Poppins', sans-serif;
color: #000000;
}
/* RIGHT SIDE CIRCLES */
.about-exp-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 35px;
}
.exp-stat-box {
width: 160px;
height: 160px;
border: 1px solid #000000;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to right,
#fff3e2, #ffbb65);
}
.exp-stat-box h3 {
font-size: 30px;
font-weight: 700;
margin-bottom: 6px;
font-family: "Oxanium", sans-serif;
}
.exp-stat-box span {
font-size: 15px;
opacity: 0.9;
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
/* RESPONSIVE */
@media (max-width: 992px) {
.about_experience_main_container {
flex-direction: column;
text-align: center;
padding: 40px 6%;
margin-top: -260px;
}
.about-exp-content,
.about-exp-stats {
width: 100%;
}
.about-exp-stats {
margin-top: 30px;
flex-wrap: wrap;
gap: 25px;
}
.exp-stat-box {
width: 140px;
height: 140px;
}
}
@media (max-width: 600px) {
.about-exp-content h2 {
font-size: 28px;
}
.exp-stat-box {
width: 120px;
height: 120px;
}
.exp-stat-box h3 {
font-size: 24px;
}
}
/* Mission Section Container */
.mission-section {
display: flex;
max-width: 1200px;
margin: 60px auto;
background-color: #ffffff;
/* White background */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
/* Optional: subtle shadow */
border: 1px solid #e0e0e0;
/* Subtle border for definition */
}
/* Image Column (Left Side) */
.mission-image-col {
flex: 1;
/* Takes equal or slightly less space than content */
position: relative;
overflow: hidden;
/* Use the black and white aesthetic from the image */
background-color: #333;
}
.mission-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Content Column (Right Side) */
.mission-content-col {
flex: 1.5;
/* Takes more space for the text content */
padding: 40px 50px;
font-family: Arial, sans-serif;
}
/* Main Heading Style (Orange/Gold Color) */
.mission-content-col .main-title {
color: #000000;
/* Gold/Orange color from the reference */
font-size: 2.2em;
font-weight: 700;
margin-bottom: 10px;
}
/* Introduction/Sub Heading Style (Smaller Orange/Gold) */
.mission-content-col .introduction-text {
color: #c49a6c;
/* Gold/Orange color */
font-size: 1.2em;
font-weight: 600;
margin-bottom: 25px;
}
/* Paragraph Text Styling */
.mission-content-col .mission-paragraph {
color: #555;
/* Dark gray text for readability */
font-size: 16px;
line-height: 1.7;
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
}
/* Responsive adjustments */
@media (max-width: 900px) {
.mission-section {
flex-direction: column;
/* Stack columns vertically on smaller screens */
}
.mission-image-col {
height: 300px;
/* Give image a fixed height when stacked */
}
.mission-content-col {
padding: 30px 20px;
flex: 1;
/* Reset flex */
}
}
.dc-premium-section {
padding: 90px 20px;
background: #fff;
font-family: 'Poppins', sans-serif;
}
/* Main heading */
.dc-premium-heading {
text-align: center;
font-family: 'Oxanium', sans-serif;
font-size: 50px;
font-weight: 700;
margin-bottom: 60px;
color: #000;
position: relative;
}
.dc-premium-heading::after {
content: "";
width: 85px;
height: 4px;
background: #7a0303;
border-radius: 2px;
margin: 15px auto 0;
display: block;
}
/* Container layout */
.dc-premium-container {
max-width: 1350px;
margin: auto;
display: flex;
gap: 40px;
}
/* Left Tabs */
.dc-premium-tabs {
width: 28%;
display: flex;
flex-direction: column;
}
.dc-tab {
padding: 16px 22px;
background: #f0fbff;
border: none;
font-family: 'Oxanium', sans-serif;
font-size: 17px;
text-align: left;
cursor: pointer;
font-weight: 600;
transition: all .35s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
.dc-tab:hover {
background: #ececec;
transform: translateX(4px);
}
.dc-tab.active {
background: #7a0303;
color: white;
box-shadow: 0 4px 14px rgba(122, 3, 3, 0.35);
}
/* Right Content */
.dc-premium-content {
width: 72%;
}
/* Hide panels */
.dc-panel {
display: none;
}
.dc-panel.active {
display: block;
}
/* 3 column grid */
.dc-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.dc-list li {
background: #fafafa;
padding: 16px 20px;
font-size: 15px;
font-weight: 500;
color: #000;
position: relative;
padding-left: 38px;
transition: .3s ease;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
/* hover */
.dc-list li:hover {
background: #fff;
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
/* icon */
.dc-list li::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #7a0303;
}
/* Responsive */
@media (max-width: 1024px) {
.dc-premium-container {
flex-direction: column;
}
.dc-premium-tabs,
.dc-premium-content {
width: 100%;
}
}
@media (max-width: 768px) {
.dc-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 540px) {
.dc-list {
grid-template-columns: repeat(1, 1fr);
}
.dc-premium-heading {
text-align: center;
font-family: 'Oxanium', sans-serif;
font-size: 30px;
font-weight: 700;
margin-bottom: 30px;
color: #000;
position: relative;
}
.dc-premium-section {
padding: 30px 20px;
background: #fff;
font-family: 'Poppins', sans-serif;
}
}
/* Section */
.overview-section {
position: relative;
padding: 20px 20px;
font-family: 'Poppins', sans-serif;
overflow: hidden;
color: #000;
}
/* Background gradient */
.overview-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #fffefc 0%, #f5f5f8 100%);
z-index: 0;
}
/* Bubble circles */
.bubble {
position: absolute;
border-radius: 50%;
background-color: rgba(122, 3, 3, 0.08);
z-index: 0;
}
.bubble1 {
width: 180px;
height: 180px;
top: 10%;
left: 5%;
}
.bubble2 {
width: 250px;
height: 250px;
bottom: 15%;
right: 10%;
}
.bubble3 {
width: 120px;
height: 120px;
top: 40%;
right: 20%;
}
.bubble4 {
width: 200px;
height: 200px;
bottom: 5%;
left: 15%;
}
/* Container */
.overview-container {
position: relative;
margin: auto;
padding: 60px 40px;
border-radius: 20px;
z-index: 1;
}
/* Headings */
.overview-heading {
font-family: 'Oxanium', sans-serif;
font-size: 42px;
font-weight: 700;
margin-bottom: 30px;
position: relative;
text-align: center;
}
/* Paragraph */
.overview-text {
font-size: 17px;
line-height: 1.8;
margin-bottom: 25px;
color: #000;
margin-top: 30px;
}
/* -------------------------------------- */
/* SERVICES LIST (Single Row Horizontal) */
/* -------------------------------------- */
.services-list-row {
list-style: none;
padding: 40px 20px;
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 40px 30px;
/* vertical & horizontal gap */
justify-content: center;
/* center the row */
background-color: #7a0303;
border-radius: 10px;
}
.services-list-row li {
font-size: 16px;
line-height: 1.6;
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
min-width: 120px;
/* each item width */
}
/* Circle images */
.services-list-row li img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #ffffff;
/* optional red border */
background: #7a0303;
padding: 4px;
}
/* Responsive */
@media (max-width: 1024px) {
.services-list-row {
gap: 15px 30px;
}
}
@media (max-width: 768px) {
.overview-heading {
font-size: 32px;
}
.overview-text {
font-size: 15px;
}
.overview-container {
padding: 40px 25px;
border-radius: 15px;
}
.services-list-row {
padding: 30px 15px;
gap: 20px 15px;
}
.services-list-row li img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #ffffff;
/* optional red border */
background: #7a0303;
padding: 4px;
}
.services-list-row li {
min-width: 100px;
max-width: 120px;
gap: 8px;
font-size: 13px;
flex: 1 1 100px;
/* Allow items to grow and shrink with a base of 100px */
}
.overview-section {
position: relative;
padding: 20px 0px;
font-family: 'Poppins', sans-serif;
overflow: hidden;
color: #000;
}
}
.new-cta-sec {
position: relative;
width: 100%;
padding: 60px 20px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
color: #ffffff;
overflow: hidden;
background: linear-gradient(135deg, #000000, #333333);
/* black → dark gray gradient */
}
/* Container */
.new-cta-sec .cta-container {
position: relative;
max-width: 1200px;
text-align: center;
z-index: 1;
}
/* Heading */
.new-cta-sec .cta-heading {
font-family: 'Oxanium', sans-serif;
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
}
/* Text */
.new-cta-sec .cta-text {
font-size: 17px;
line-height: 1.6;
margin-bottom: 30px;
}
/* Floating shapes */
.new-cta-sec::before,
.new-cta-sec::after {
content: '';
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.05);
z-index: 0;
}
.new-cta-sec::before {
width: 200px;
height: 200px;
top: -50px;
left: -50px;
}
.new-cta-sec::after {
width: 300px;
height: 300px;
bottom: -80px;
right: -80px;
}
/* Responsive */
@media (max-width: 1024px) {
.new-cta-sec .cta-heading {
font-size: 32px;
}
.new-cta-sec .cta-text {
font-size: 16px;
}
.new-cta-sec .cta-btn {
padding: 12px 30px;
font-size: 15px;
}
}
@media (max-width: 768px) {
.new-cta-sec {
padding: 50px 15px;
}
.new-cta-sec .cta-heading {
font-size: 28px;
}
.new-cta-sec .cta-text {
font-size: 15px;
}
.new-cta-sec .cta-btn {
padding: 10px 25px;
font-size: 14px;
}
}
.mt--20 {
margin-top: -90px;
}
.event-security-section {
padding: 80px 0;
background: #f9f9f9;
/* Light background */
}
.event-security-section .container {
max-width: 900px;
margin: auto;
text-align: center;
}
.event-title {
font-size: 52px;
font-weight: 700;
margin-bottom: 20px;
color: #000000;
font-family: "Oxanium", sans-serif;
}
.event-desc {
font-size: 16px;
line-height: 1.8;
color: #2e2e2e;
font-family: 'Poppins', sans-serif;
margin-top: 30px;
}
/* Section Styling */
.why-events-sec {
padding: 80px 0;
background: #ffffff;
}
/* Flex Container */
.why-events-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* Image */
.why-events-img img {
width: 500px;
height: 500px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
/* Right Content */
.why-events-content {
flex: 1;
}
.why-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
font-family: "Oxanium", sans-serif;
color: #222;
}
.why-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.why-list li {
margin-bottom: 12px;
font-size: 16px;
line-height: 1.7;
font-family: 'Poppins', sans-serif;
color: #2e2e2e;
}
.why-footer {
font-size: 17px;
line-height: 1.8;
font-family: 'Poppins', sans-serif;
margin-top: 10px;
color: #555;
}
/* Responsive */
@media (max-width: 992px) {
.why-events-container {
flex-direction: column;
text-align: center;
}
.why-events-img img {
width: 100%;
height: auto;
max-width: 450px;
}
.why-events-sec {
padding: 40px 0;
background: #ffffff;
}
.why-title {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
font-family: "Oxanium", sans-serif;
color: #222;
}
.event-security-section {
padding: 40px 0;
background: #f9f9f9;
/* Light background */
}
}
.event-gallery-sec {
padding: 80px 0;
background: #f9f9f9;
}
.gallery-title {
text-align: center;
font-size: 52px;
font-weight: 700;
margin-bottom: 40px;
font-family: "Oxanium", sans-serif;
color: #222;
}
/* 4 images per row */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.gallery-item img {
width: 100%;
height: 260px;
object-fit: cover;
border-radius: 10px;
transition: 0.3s ease;
}
/* Hover effect */
.gallery-item img:hover {
transform: scale(1.05);
}
/* Responsive */
@media (max-width: 992px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.gallery-grid {
grid-template-columns: 1fr;
}
.event-gallery-sec {
padding: 40px 0;
background: #f9f9f9;
}
.gallery-title {
text-align: center;
font-size: 26px;
font-weight: 700;
margin-bottom: 40px;
font-family: "Oxanium", sans-serif;
color: #222;
}
}
/* Career Form Section */
.career-form-section {
padding: 80px 20px;
background: linear-gradient(135deg, #f1f7fb 0%, #e0f0fa 100%);
}
.career-container {
max-width: 750px;
margin: auto;
background: #ffffff;
padding: 50px 35px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.career-container:hover {
transform: translateY(-5px);
}
/* Heading */
.career-heading {
text-align: center;
font-size: 26px;
font-weight: 700;
font-family: "Oxanium", sans-serif;
color: #333;
}
/* Fields */
.career-field {
margin-bottom: 25px;
font-family: "Poppins", sans-serif;
}
.career-field label {
display: block;
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
color: #000000;
}
.career-field input[type="text"],
.career-field input[type="email"] {
width: 100%;
border: none;
border-bottom: 2px solid #d3d3d3;
padding: 12px 0;
font-size: 15px;
outline: none;
background: transparent;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
border-radius: 5px;
}
.career-field input:focus {
border-bottom: 2px solid #3cc6a8;
box-shadow: 0 2px 10px rgba(60, 198, 168, 0.15);
}
/* Upload Box */
.career-upload-box {
width: 100%;
border: 2px dashed #b1d4e0;
border-radius: 12px;
padding: 30px;
text-align: center;
background: #f0fbff;
transition: background 0.3s ease, border-color 0.3s ease;
}
.career-upload-box:hover {
background: #e0f7ff;
border-color: #3cc6a8;
}
.career-upload-box p {
font-size: 14px;
margin: 10px 0;
color: #555;
}
.career-upload-box span {
display: block;
margin: 8px 0;
font-size: 13px;
color: #777;
}
.upload-icon {
font-size: 40px;
opacity: 0.7;
margin-bottom: 10px;
}
.browse-btn {
display: inline-block;
background: #ffffff;
padding: 10px 18px;
border-radius: 50px;
cursor: pointer;
font-size: 14px;
color: #fff;
font-weight: 600;
transition: background 0.3s ease;
border: 1px solid #7a0303;
}
.browse-btn:hover {
background: #f3fffd;
}
/* Submit Button */
.career-submit-btn {
width: 100%;
background: #7a0303;
border: none;
padding: 15px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
color: #fff;
transition: background 0.3s ease, transform 0.2s ease;
font-family: "Poppins", sans-serif;
}
.career-submit-btn:hover {
background: #af0505;
transform: scale(1.03);
}
/* Responsive */
@media (max-width: 768px) {
.career-container {
padding: 35px 20px;
}
.career-heading {
font-size: 22px;
}
/* Career Form Section */
.career-form-section {
padding: 40px 20px;
background: linear-gradient(135deg, #f1f7fb 0%, #e0f0fa 100%);
}
}
/* Define Variables (assuming these are defined elsewhere) */
:root {
--white: #ffffff;
--red: #d10000;
/* Dark red accent */
--gray-dark: #282c34;
/* Dark background color */
--form-dark-bg: rgba(40, 44, 52, 1);
}
/* ================================================= */
/* A. GENERIC FORM BOX BASE STYLE (Applies to both forms) */
/* ================================================= */
.contact-form-box {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px 30px 15px 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 10;
}
/* ================================================= */
/* B. HOME PAGE FORM (HERO OVERLAY) - CRITICAL STYLES */
/* ================================================= */
.hero-form-overlay {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
@media (max-width: 992px) {
.hero-form-overlay {
position: relative;
right: auto;
top: auto;
transform: none;
width: calc(100% - 40px);
margin: -50px 20px 30px 20px;
}
}
/* ================================================= */
/* C. CONTACT PAGE LAYOUT (TWO-COLUMN GRID) */
/* ================================================= */
.contact-page-section {
padding: 80px 20px;
background-color: #ffffff;
display: flex;
justify-content: center;
}
.contact-page-container {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 40px;
max-width: 1200px;
width: 100%;
}
/* ================================================= */
/* D. STANDALONE CONTACT FORM (CONTACT US PAGE) */
/* ================================================= */
.standalone-form {
position: relative;
right: auto;
top: auto;
transform: none;
width: 100%;
max-width: 550px;
margin: 0;
backdrop-filter: none;
background: var(--form-dark-bg);
border: none;
padding: 40px;
}
.contact-form-column {
display: flex;
justify-content: center;
align-items: flex-start;
}
.form-title {
font-size: 28px;
font-family: "Oxanium", sans-serif;
margin-bottom: 30px;
font-weight: 600;
color: var(--white);
text-align: center;
}
/* ================================================= */
/* E. LEFT COLUMN: CONTACT INFO BOXES (VERTICAL STACK FIX) */
/* ================================================= */
.contact-info-column {
padding: 20px;
}
.info-heading {
font-size: 32px;
font-family: "Oxanium", sans-serif;
color: var(--red);
margin-bottom: 40px;
font-weight: 700;
}
.info-box {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}
.info-icon {
font-size: 24px;
color: var(--red);
margin-right: 20px;
padding: 10px;
border-radius: 50%;
background: rgba(209, 0, 0, 0.1);
flex-shrink: 0;
}
/* CRITICAL FIX: Ensure Label and Value stack vertically */
.info-details {
display: flex;
flex-direction: column;
/* This forces vertical stacking */
/* Remove any unnecessary default gap/margin here */
}
.info-label {
font-size: 24px;
color: rgb(0, 0, 0);
margin-bottom: 2px;
/* Small margin below label */
margin-top: 0;
font-family: "Oxanium", sans-serif;
font-weight: 600;
}
.info-value,
.info-value a,
.address-text {
font-size: 16px;
font-weight: 500;
color: #2e2e2e;
text-decoration: none;
line-height: 1.4;
margin: 0;
/* Important: Remove default margins from a/p tags */
padding: 0;
font-family: 'Poppins', sans-serif;
}
/* ================================================= */
/* F. SHARED FORM FIELD STYLES (Applies to both forms) */
/* ================================================= */
/* ... (All form, input, button, checkbox styles are retained from the previous, correct response) ... */
.form-row {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.form-row .form-group {
flex: 1;
margin-bottom: 0;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea {
width: 100%;
padding: 10px 15px;
margin-bottom: 5px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
border-radius: 8px;
font-size: 12px;
transition: all 0.3s ease;
}
.contact-form-box input:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus {
outline: none;
border-color: var(--red);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 0 10px rgba(224, 0, 0, 0.3);
}
.contact-form-box option {
background: var(--gray-dark);
color: var(--white);
}
.contact-form-box textarea {
resize: vertical;
min-height: 90px;
}
.submit-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--red), #cc0000);
color: var(--white);
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
background: linear-gradient(135deg, #cc0000, var(--red));
transform: translateY(-2px);
box-shadow: 0 0 20px rgba(224, 0, 0, 0.5);
}
.submit-btn .fas {
margin-right: 8px;
}
.optin-row {
margin-top: 10px;
margin-bottom: 25px;
align-items: center;
}
.consent-label {
display: inline;
font-size: 14px !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.7) !important;
cursor: pointer;
}
#consent {
width: 16px !important;
height: 16px !important;
margin-right: 10px;
vertical-align: middle;
appearance: none;
border: 2px solid rgba(255, 255, 255, 0.5) !important;
border-radius: 4px;
background: transparent !important;
position: relative;
top: -1px;
cursor: pointer;
}
#consent:checked {
background-color: var(--red) !important;
border-color: var(--red) !important;
}
#consent:checked::before {
content: '\2713';
display: block;
color: var(--white);
font-size: 12px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ================================================= */
/* G. RESPONSIVE ADJUSTMENTS */
/* ================================================= */
@media (max-width: 992px) {
.contact-page-container {
grid-template-columns: 1fr;
gap: 30px;
}
.contact-info-column,
.contact-form-column {
padding: 0;
}
.info-heading {
text-align: center;
margin-bottom: 30px;
}
.contact-form-box {
max-width: 600px;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.contact-page-section {
padding: 40px 15px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.info-box {
padding: 15px;
}
}
/* Preloader Background */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
}
/* Center Wrapper */
.preloader-inner {
text-align: center;
}
/* Circle Loader with LOGO inside */
.logo-circle {
width: 130px;
height: 130px;
border-radius: 50%;
border: 6px solid #ffffff20;
position: relative;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Rotating Red Border */
.logo-circle::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 6px solid transparent;
border-top-color: red;
border-right-color: red;
animation: rotateCircle 1.2s linear infinite;
}
@keyframes rotateCircle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* LOGO */
.preloader-logo {
width: 120px;
height: auto;
}
@keyframes logoGlow {
0% {
filter: drop-shadow(0 0 4px red);
}
100% {
filter: drop-shadow(0 0 15px red);
}
}
/* Text */
.loader-title {
color: #fff;
margin-top: 18px;
font-size: 30px;
font-weight: 600;
font-family: "Oxanium", sans-serif;
}
.loader-title span {
color: #f39c12;
font-weight: 700;
}
/* Hide after load */
body.loaded #preloader {
opacity: 0;
visibility: hidden;
transition: 0.6s ease;
}
/* Define Variables (assuming these are defined elsewhere) */
:root {
--white: #ffffff;
--red: #d10000;
/* Dark red accent */
--gray-dark: #282c34;
/* Dark background color (now used for text) */
--dark-text: #333333;
/* For general text on white background */
}
/* ================================================= */
/* 1. SECTION & HEADER STYLES (White Background) */
/* ================================================= */
.security-services-detail-section.white-bg-section {
padding: 80px 20px;
background-color: #f3ffed;
/* CRITICAL: White background */
font-family: 'Poppins', sans-serif;
}
.security-services-detail-section .container {
max-width: 1200px;
margin: auto;
}
.security-intro-header {
text-align: center;
margin-bottom: 50px;
}
.section-title {
font-family: 'Oxanium', sans-serif;
font-size: 38px;
font-weight: 700;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
/* Ensure title text is red */
.section-title.red-text {
color: var(--red);
/* Title text is red */
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--red);
margin: 10px auto 0;
border-radius: 2px;
}
.section-subtitle.dark-text {
font-size: 17px;
color: var(--dark-text);
/* Subtitle text is dark */
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
/* Services Grid */
.services-grid.three-cards-only {
display: grid;
/* 3 equal columns for 3 cards */
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* ================================================= */
/* 2. SERVICE CARD STYLES (Clean White/Light Look) */
/* ================================================= */
.service-card.white-card {
background: var(--white);
/* Card background is white */
padding: 30px 30px 15px 30px;
border-radius: 10px;
/* Use a subtle light shadow for definition */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid rgba(0, 0, 0, 0.05);
/* Light border */
border-top: 5px solid var(--red);
/* Red accent line maintained */
}
.service-card.white-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(209, 0, 0, 0.2);
/* Red hover shadow */
background: #fdfdfd;
}
/* Icon */
.card-icon-wrapper {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.card-icon {
font-size: 36px;
color: var(--red);
}
/* Titles and Descriptions */
.card-title.dark-text {
font-family: 'Oxanium', sans-serif;
font-size: 24px;
font-weight: 600;
color: var(--gray-dark);
/* Dark title text */
margin-bottom: 10px;
}
.card-description.dark-text {
font-size: 15px;
color: var(--dark-text);
/* Dark description text */
line-height: 1.5;
margin-bottom: 20px;
}
/* Key Features List */
.key-features {
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
/* Darker border separator */
}
.features-title.dark-text {
font-size: 16px;
font-family: 'Oxanium', sans-serif;
font-weight: 600;
color: var(--dark-text);
/* Dark feature title */
margin-bottom: 15px;
}
.key-features ul {
list-style: none;
padding-left: 0;
}
.key-features li {
font-size: 14px;
color: var(--dark-text);
/* Dark feature text */
margin-bottom: 5px;
padding-left: 18px;
position: relative;
line-height: 1.9;
}
/* Custom bullet point (Red tick) */
.key-features li::before {
content: '\f00c';
/* Font Awesome checkmark icon */
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--red);
font-size: 12px;
position: absolute;
left: 0;
top: 3px;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
.services-grid.three-cards-only {
/* 2 columns on tablet */
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.section-title {
font-size: 32px;
}
.services-grid.three-cards-only {
/* Single column on mobile */
grid-template-columns: 1fr;
}
}
/* C2S Corp Highlight Styling */
.highlight-c2s {
background: linear-gradient(135deg, #ffc107, #ffeb3b);
color: #000;
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
font-family: 'Oxanium', sans-serif;
box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
display: inline-block;
}
/* OUR PRESENCE SECTION */
.presence-section {
background-color: #ffffff;
padding: 60px 0;
border-bottom: 2px solid #333;
}
.presence-title {
color: #000000;
font-family: 'Poppins', sans-serif;
font-size: 36px;
font-weight: 700;
margin-bottom: 50px;
padding-left: 15px;
text-transform: capitalize;
}
.presence-grid {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 40px;
}
.presence-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
min-width: 250px;
transition: transform 0.3s ease;
}
.presence-item:hover {
transform: translateY(-10px);
}
.presence-item img {
max-width: 220px;
height: auto;
margin-bottom: 25px;
filter: drop-shadow(0 0 15px rgba(243, 156, 18, 0.2));
border-radius: 10px;
}
.presence-label {
background-color: #3d2b0e;
color: #fff;
padding: 10px 35px;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.presence-title {
font-size: 28px;
text-align: center;
padding-left: 0;
}
.presence-grid {
flex-direction: column;
gap: 50px;
}
.presence-item img {
max-width: 180px;
}
}