/*=========================*/
/* JOHNSON WEBSITE */
/* MAIN STYLES */
/*=========================*/
/* CSS Organization:
1. Variables & Reset
2. Base Styles
3. Navigation
4. 3D Slider
5. About Section
6. Services
7. Other Components
8. Responsive
*/
/*=========================*/
/* 1. VARIABLES */
/*=========================*/
:root {
--primary-color: #e81c2e;
--secondary-color: #ff4757;
--dark-color: #202c45;
--light-color: #ffffff;
--text-light: rgba(255, 255, 255, 0.9);
--shadow-dark: rgba(0, 0, 0, 0.3);
--transition-fast: 0.3s ease;
--transition-slow: 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/*=========================*/
/* 2. BASE RESET */
/*=========================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Barlow", sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/*=========================*/
/* 3. NAVIGATION */
/*=========================*/
.top-bar {
background: linear-gradient(135deg, var(--dark-color) 0%, #1a1a1a 100%);
padding: 15px 0;
}
.nav-bar {
background: var(--light-color);
box-shadow: 0 2px 10px var(--shadow-dark);
transition: var(--transition-fast);
}
/* Add more navigation styles as needed */
/*=========================*/
/* 4. 3D SLIDER */
/*=========================*/
.slider-3d-container {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
background: #000;
perspective: 2500px;
margin-bottom: 0;
}
.slider-3d {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateZ(0);
}
.slide-3d {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transform: translateX(150%) rotateY(75deg) scale(0.6);
transform-origin: center center;
transition: var(--transition-slow);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
will-change: transform, opacity;
backface-visibility: hidden;
}
.slide-3d::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
transition: all 0.4s ease-out;
will-change: background;
}
.slide-3d.active {
opacity: 1;
transform: translateX(0) rotateY(0deg) scale(1);
z-index: 3;
filter: brightness(1.1) contrast(1.1) saturate(1.2);
box-shadow: 0 40px 100px rgba(232, 28, 46, 0.3);
}
.slide-3d.active::before {
background: rgba(0, 0, 0, 0.4);
}
.slide-3d.prev {
opacity: 0.7;
transform: translateX(-80%) rotateY(-45deg) scale(0.75);
z-index: 2;
}
.slide-3d.next {
opacity: 0.7;
transform: translateX(80%) rotateY(45deg) scale(0.75);
z-index: 2;
}
/* Slide Content */
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 5;
max-width: 600px;
padding: 0 20px;
opacity: 0;
transform: translate(-50%, -50%) translateY(30px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
will-change: transform, opacity;
}
.slide-3d.active .slide-content {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
.slide-content h3 {
color: var(--primary-color);
font-size: 24px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 10px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}
.slide-content h1 {
color: var(--light-color);
font-size: 4.5rem;
font-weight: 900;
margin-bottom: 20px;
text-transform: uppercase;
line-height: 1.1;
text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.9);
}
.slide-content p {
color: var(--light-color);
font-size: 18px;
margin-bottom: 30px;
opacity: 0.95;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}
/* Navigation Controls */
.slider-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
z-index: 10;
padding: 0 30px;
transform: translateY(-50%);
}
.nav-btn {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
color: white;
font-size: 22px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(15px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.nav-btn:hover {
background: rgba(232, 28, 46, 0.95);
border-color: var(--secondary-color);
transform: scale(1.1);
box-shadow: 0 12px 30px rgba(232, 28, 46, 0.5);
color: white;
}
/*=========================*/
/* 5. ABOUT SECTION */
/*=========================*/
.about-modern {
position: relative;
padding: 80px 0;
background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
overflow: hidden;
}
.section-title {
color: var(--light-color);
font-size: 2.8rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 25px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
/* Feature Items */
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
padding: 20px;
background: rgba(232, 28, 46, 0.05);
border-radius: 15px;
border: 1px solid rgba(232, 28, 46, 0.1);
transition: var(--transition-fast);
}
.feature-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
transition: var(--transition-fast);
}
.feature-text h4 {
color: var(--light-color);
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.feature-text p {
color: var(--light-color);
font-size: 14px;
margin: 0;
line-height: 1.5;
opacity: 0.9;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/*=========================*/
/* 6. BUTTONS */
/*=========================*/
.btn-custom {
background: linear-gradient(
45deg,
var(--primary-color),
var(--secondary-color)
);
color: var(--light-color);
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: var(--transition-fast);
display: inline-block;
}
.btn-custom:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(232, 28, 46, 0.4);
color: var(--light-color);
text-decoration: none;
}
/*=========================*/
/* 7. RESPONSIVE */
/*=========================*/
@media (max-width: 768px) {
.slide-content h1 {
font-size: 2.5rem;
}
.slider-3d-container {
height: 70vh;
}
.nav-btn {
width: 50px;
height: 50px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.slide-content h1 {
font-size: 2rem;
}
.slide-content p {
font-size: 16px;
}
}
/*=========================*/
/* FOOTER */
/*=========================*/
.footer {
background: var(--dark-color);
color: var(--text-light);
padding: 50px 0 20px;
}
.footer h2 {
color: var(--light-color);
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
}
.footer p,
.footer a {
color: var(--text-light);
line-height: 1.8;
margin-bottom: 10px;
transition: var(--transition-fast);
}
.footer a:hover {
color: var(--primary-color);
text-decoration: none;
}
.footer-social .btn {
width: 40px;
height: 40px;
background: var(--primary-color);
color: var(--light-color);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
transition: var(--transition-fast);
}
.footer-social .btn:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
.copyright {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
margin-top: 30px;
text-align: center;
}
/*=========================*/
/* UTILITIES */
/*=========================*/
.section-header {
margin-bottom: 50px;
}
.section-header p {
color: var(--primary-color);
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
.section-header h2 {
color: var(--dark-color);
font-size: 2.5rem;
font-weight: 900;
line-height: 1.2;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--primary-color);
color: var(--light-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
transition: var(--transition-fast);
opacity: 0;
visibility: hidden;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
/*=========================*/
/* LOADER ANIMATION */
/*=========================*/
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--light-color);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
width: 50px;
height: 50px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*******************************/
/********* General CSS *********/
/*******************************/
@import url("gallery.css");
body {
color: #444444;
font-weight: 400;
background: #ffffff;
font-family: "Poppins", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #e81c2e;
}
a {
color: #202c45;
transition: 0.3s;
}
a:hover,
a:active,
a:focus {
color: #e81c2e;
outline: none;
text-decoration: none;
}
.btn.btn-custom {
padding: 10px 30px 12px 30px;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #ffffff;
background: #e81c2e;
border: none;
border-radius: 60px;
box-shadow: inset 0 0 0 0 #202c45;
transition: ease-out 0.5s;
-webkit-transition: ease-out 0.5s;
-moz-transition: ease-out 0.5s;
}
.btn.btn-custom:hover {
color: #e81c2e;
background: #202c45;
box-shadow: inset 200px 0 0 0 #202c45;
transform: translateY(-2px);
}
.btn:focus,
.form-control:focus {
box-shadow: none;
}
.container-fluid {
max-width: 1400px;
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
font-size: inherit;
margin-left: 0;
}
/**********************************/
/****** Loader & Back to Top ******/
/**********************************/
#loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
-o-transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
z-index: 999;
}
#loader.show {
-webkit-transition: opacity 0.6s ease-out, visibility 0s linear 0s;
-o-transition: opacity 0.6s ease-out, visibility 0s linear 0s;
transition: opacity 0.6s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}
#loader .loader {
position: relative;
width: 45px;
height: 45px;
border: 5px solid #dddddd;
border-top: 5px solid #e81c2e;
border-radius: 50%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.back-to-top {
position: fixed;
display: none;
width: 44px;
height: 44px;
text-align: center;
line-height: 1;
font-size: 22px;
right: 15px;
bottom: 15px;
transition: 0.5s;
background: #e81c2e;
border-radius: 44px;
z-index: 9;
}
.back-to-top i {
color: #ffffff;
padding-top: 10px;
}
.back-to-top:hover {
background: #202c45;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(232, 28, 46, 0.3);
}
/**********************************/
/********** Top Bar CSS ***********/
/**********************************/
.top-bar {
position: relative;
height: 75px;
display: flex;
align-items: center;
background: #000000;
}
.top-bar .logo {
text-align: left;
overflow: hidden;
}
.top-bar .logo h1 {
margin: -4px 0 0 0;
color: #e81c2e;
font-size: 50px;
line-height: 50px;
font-weight: 800;
letter-spacing: 1px;
font-style: italic;
}
.top-bar .logo h1 span {
color: #202c45;
}
.top-bar .logo img {
max-width: 100%;
max-height: 60px;
transition: all 0.3s ease;
}
.top-bar .logo:hover img {
transform: scale(1.05);
}
.top-bar .top-bar-item {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.top-bar .top-bar-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #e81c2e;
border-radius: 40px;
}
.top-bar .top-bar-icon i {
margin: 0;
color: #ffffff;
font-size: 16px;
}
.top-bar .top-bar-text {
padding-left: 0px;
}
.top-bar .top-bar-text h3 {
margin: 0 0 5px 0;
font-size: 18px;
font-weight: 600;
}
.top-bar .top-bar-text p {
margin: 0;
font-size: 14px;
font-weight: 400;
color: #fff;
}
@media (max-width: 991.98px) {
.top-bar .logo {
text-align: center;
}
}
/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.nav-bar {
position: relative;
background: #ffffff;
}
.nav-bar.nav-sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 999;
}
.nav-bar .navbar {
padding: 20px 0;
background: #ffffff !important;
transition: 0.3s;
}
.nav-bar.nav-sticky .navbar {
padding: 5px 0;
}
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: #ffffff;
padding: 20px;
font-weight: 500;
letter-spacing: 1px;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: #e81c2e;
}
/* Force dark text color for navbar links on white background */
.nav-bar .navbar-nav .nav-link,
.nav-bar .navbar-nav .nav-link:focus,
.nav-bar .navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
color: #000000 !important;
}
.nav-bar .navbar-nav .nav-link:hover,
.nav-bar .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: #e81c2e !important;
font-weight: 600;
background-color: rgba(232, 28, 46, 0.1);
border-radius: 5px;
}
.nav-bar .dropdown-menu {
margin-top: 0;
border: 0;
border-radius: 0;
background: #f8f9fa;
}
.nav-bar .btn.btn-custom {
color: #ffffff;
background: #e81c2e;
box-shadow: inset 0 0 0 0 #e81c2e;
}
.nav-bar .btn:hover {
color: #ffffff;
background: #000000;
box-shadow: inset 200px 0 0 0 #e81c2e;
}
.navbar-toggler-icon {
background-image: none; /* Remove default icon */
width: 25px;
height: 3px;
background-color: #e81c2e; /* Your custom color */
position: relative;
transition: all 0.3s ease-in-out;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: "";
position: absolute;
left: 0;
width: 25px;
height: 3px;
background-color: #e81c2e;
transition: all 0.3s ease-in-out;
}
.navbar-toggler-icon::before {
top: -8px;
}
.navbar-toggler-icon::after {
top: 8px;
}
@media (min-width: 992px) {
.nav-bar .navbar-brand {
display: none;
}
}
@media (max-width: 991.98px) {
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
padding: 5px 0;
}
.nav-bar .dropdown-menu {
box-shadow: none;
}
.nav-bar .btn {
display: none;
}
}
/*******************************/
/********** Hero CSS ***********/
/*******************************/
/*********************************/
/******** 3D Slider CSS *********/
/*********************************/
.slider-3d-container {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
background: #000;
perspective: 2500px; /* Increased for more dramatic 3D effect */
margin-bottom: 0;
}
.slider-3d {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateZ(0); /* Force GPU acceleration */
}
.slide-3d {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transform: translateX(150%) rotateY(75deg) scale(0.6);
transform-origin: center center;
transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
will-change: transform, opacity;
backface-visibility: hidden;
}
.slide-3d::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
transition: all 0.4s ease-out;
will-change: background;
}
.slide-3d.active {
opacity: 1;
transform: translateX(0) rotateY(0deg) scale(1);
z-index: 3;
filter: brightness(1.1) contrast(1.1) saturate(1.2);
box-shadow: 0 40px 100px rgba(232, 28, 46, 0.3);
}
.slide-3d.active::before {
background: rgba(0, 0, 0, 0.4);
}
.slide-3d.prev {
opacity: 0.7;
transform: translateX(-80%) rotateY(-45deg) scale(0.75);
z-index: 2;
}
.slide-3d.next {
opacity: 0.7;
transform: translateX(80%) rotateY(45deg) scale(0.75);
z-index: 2;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 5;
max-width: 600px;
padding: 0 20px;
opacity: 0;
transform: translate(-50%, -50%) translateY(30px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
will-change: transform, opacity;
}
.slide-3d.active .slide-content {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
.slide-content h3 {
color: #e81c2e;
font-size: 24px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 10px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
animation: slideInFromTop 0.4s ease forwards;
}
.slide-content h1 {
color: #ffffff;
font-size: 4.5rem;
font-weight: 900;
margin-bottom: 20px;
text-transform: uppercase;
line-height: 1.1;
text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.9);
animation: slideInFromBottom 0.4s ease 0.1s forwards;
}
.slide-content p {
color: #ffffff;
font-size: 18px;
margin-bottom: 30px;
opacity: 0.95;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
animation: fadeInUp 0.4s ease 0.2s forwards;
}
.slide-content .btn.btn-custom {
padding: 15px 40px;
font-size: 16px;
font-weight: 600;
background: linear-gradient(45deg, #e81c2e, #ff4757);
border: none;
border-radius: 50px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 30px rgba(232, 28, 46, 0.4);
transition: all 0.2s ease;
animation: bounceIn 0.4s ease 0.3s forwards;
opacity: 0;
transform: scale(0.9);
}
.slide-content .btn.btn-custom:hover {
background: linear-gradient(45deg, #ff4757, #e81c2e);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 35px rgba(232, 28, 46, 0.6);
color: white;
}
/* Navigation Buttons */
.slider-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
z-index: 10;
padding: 0 30px;
transform: translateY(-50%);
}
.nav-btn {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
color: white;
font-size: 22px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(15px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.nav-btn:hover {
background: rgba(232, 28, 46, 0.95);
border-color: #ff4757;
transform: scale(1.1);
box-shadow: 0 12px 30px rgba(232, 28, 46, 0.5);
color: white;
}
/* Slide Indicators */
.slide-indicators {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 10;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.indicator::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: #e81c2e;
border-radius: 50%;
transition: all 0.3s ease;
}
.indicator.active,
.indicator:hover {
background: #e81c2e;
transform: scale(1.3);
}
.indicator.active::before {
width: 20px;
height: 20px;
background: rgba(232, 28, 46, 0.3);
}
/* Animations */
@keyframes slideInFromTop {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromBottom {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 0.9;
transform: translateY(0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.8);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.slide-content h1 {
font-size: 3.5rem;
}
.slider-3d-container {
height: 80vh;
min-height: 500px;
}
}
@media (max-width: 768px) {
.slider-3d-container {
height: 70vh;
min-height: 400px;
}
.slide-content h3 {
font-size: 18px;
letter-spacing: 2px;
}
.slide-content h1 {
font-size: 2.5rem;
}
.slide-content p {
font-size: 16px;
}
.slider-nav {
padding: 0 15px;
}
.nav-btn {
width: 50px;
height: 50px;
font-size: 16px;
}
.slide-indicators {
bottom: 20px;
}
}
@media (max-width: 480px) {
.slide-content h1 {
font-size: 2rem;
}
.slide-content .btn.btn-custom {
padding: 12px 30px;
font-size: 14px;
}
}
@media (max-width: 991.98px) {
.carousel .carousel-text h3 {
margin-bottom: 5px;
}
.carousel .carousel-text h1 {
font-size: 60px;
}
.carousel .carousel-text p {
font-size: 16px;
}
.carousel .carousel-text .btn {
padding: 12px 30px;
font-size: 15px;
letter-spacing: 0;
}
}
@media (max-width: 767.98px) {
.carousel .carousel-text h3 {
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 15px;
}
.carousel .carousel-text h1 {
font-size: 45px;
}
.carousel .carousel-text .btn {
padding: 10px 25px;
font-size: 15px;
letter-spacing: 0;
}
}
@media (max-width: 575.98px) {
.carousel .carousel-text h3 {
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 10px;
}
.carousel .carousel-text h1 {
font-size: 30px;
margin-bottom: 15px;
}
.carousel .carousel-text p {
margin-bottom: 25px;
}
.carousel .carousel-text .btn {
padding: 8px 20px;
font-size: 14px;
letter-spacing: 0;
}
}
/*******************************/
/******* Page Header CSS *******/
/*******************************/
.page-header {
position: relative;
margin-bottom: 45px;
padding: 90px 0;
text-align: center;
background: #202c45;
}
.page-header h2 {
position: relative;
color: #ffffff;
font-size: 60px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 5px;
}
.page-header h2::after {
position: absolute;
content: "";
width: 100px;
height: 2px;
left: calc(50% - 50px);
bottom: 0;
background: #ffffff;
}
.page-header a {
position: relative;
padding: 0 12px;
font-size: 22px;
color: #ffffff;
}
.page-header a:hover {
color: #e81c2e;
}
.page-header a::after {
position: absolute;
content: "/";
width: 8px;
height: 8px;
top: -2px;
right: -7px;
text-align: center;
color: #ffffff;
}
.page-header a:last-child::after {
display: none;
}
@media (max-width: 991.98px) {
.page-header {
padding: 60px 0;
}
.page-header h2 {
font-size: 45px;
}
.page-header a {
font-size: 20px;
}
}
@media (max-width: 767.98px) {
.page-header {
padding: 45px 0;
}
.page-header h2 {
font-size: 35px;
}
.page-header a {
font-size: 18px;
}
}
/*******************************/
/******* Section Header ********/
/*******************************/
.section-header {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto 45px auto;
}
.section-header p {
display: inline-block;
margin-bottom: 10px;
padding-bottom: 5px;
position: relative;
font-size: 16px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: #e81c2e;
}
.section-header p::after {
position: absolute;
content: "";
width: 50%;
height: 2px;
left: 25%;
bottom: 0;
background: #e81c2e;
}
.section-header.text-left p::after {
left: 0;
}
.section-header.text-right p::after {
left: 50%;
}
.section-header h2 {
margin: 0;
font-size: 45px;
font-weight: 700;
text-transform: capitalize;
}
@media (max-width: 991.98px) {
.section-header h2 {
font-size: 45px;
}
}
@media (max-width: 767.98px) {
.section-header h2 {
font-size: 40px;
}
}
@media (max-width: 575.98px) {
.section-header h2 {
font-size: 35px;
}
}
/*******************************/
/********** About CSS **********/
/*******************************/
.about-modern {
position: relative;
padding: 80px 0;
background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
overflow: hidden;
}
.about-modern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.03;
z-index: 1;
}
.about-modern .container {
position: relative;
z-index: 2;
}
/* Image Section */
.about-image-wrapper {
position: relative;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 30px 60px rgba(232, 28, 46, 0.15);
}
.about-image-main {
position: relative;
overflow: hidden;
border-radius: 20px;
transform: perspective(1000px) rotateY(-5deg);
transition: all 0.6s ease;
}
.about-image-main:hover {
transform: perspective(1000px) rotateY(0deg) scale(1.02);
}
.about-image-main img {
width: 100%;
height: 785px;
object-fit: cover;
border-radius: 20px;
transition: all 0.6s ease;
filter: brightness(0.9) contrast(1.1);
margin-top: -40px;
}
.about-image-main:hover img {
filter: brightness(1) contrast(1.2);
}
.about-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
rgba(232, 28, 46, 0.1) 0%,
transparent 50%,
rgba(0, 0, 0, 0.3) 100%
);
border-radius: 20px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 30px;
}
.experience-badge {
background: rgba(255, 255, 255, 0.95);
color: #333333;
padding: 25px 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform: translateY(20px);
opacity: 0;
animation: badgeSlideUp 1s ease-out 0.5s forwards;
}
.experience-badge h3 {
font-size: 2.5rem;
font-weight: 900;
margin: 0;
line-height: 1;
}
.experience-badge p {
font-size: 0.9rem;
margin: 5px 0 0 0;
font-weight: 600;
line-height: 1.2;
}
/* Content Section */
.about-content-modern {
padding-left: 40px;
animation: fadeInRight 1s ease-out 0.3s both;
}
.section-subtitle {
color: #e81c2e;
font-size: 16px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-subtitle::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 2px;
background: linear-gradient(90deg, #e81c2e, #ff4757);
animation: lineExpand 1s ease-out 1s both;
}
.section-title {
color: #ffffff;
font-size: 2.8rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 25px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
.about-description {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
line-height: 1.8;
margin-bottom: 40px;
animation: fadeInUp 1s ease-out 0.8s both;
}
/* Features */
.about-features {
margin-bottom: 40px;
display: flex;
justify-content: center;
gap: 30px;
}
.feature-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 25px;
padding: 20px;
background: rgba(232, 28, 46, 0.05);
border-radius: 15px;
border: 1px solid rgba(232, 28, 46, 0.1);
transition: all 0.4s ease;
flex: 1;
max-width: 400px;
}
.feature-item:hover {
background: rgba(232, 28, 46, 0.1);
border-color: rgba(232, 28, 46, 0.3);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(232, 28, 46, 0.15);
}
.feature-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.4s ease;
}
.feature-item:hover .feature-icon {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
box-shadow: 0 8px 16px rgba(255, 255, 255, 0.1);
}
.feature-icon i {
color: #ffffff;
font-size: 24px;
}
.feature-text {
flex: 1;
text-align: left;
}
.feature-text h4 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.feature-text p {
color: #ffffff;
font-size: 14px;
margin: 0;
line-height: 1.5;
opacity: 0.9;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* CTA Button */
.about-cta {
animation: fadeInUp 1s ease-out 1.4s both;
}
.btn-modern {
display: inline-block;
padding: 15px 35px;
background: linear-gradient(135deg, #e81c2e 0%, #ff4757 100%);
color: #ffffff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
border-radius: 50px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(232, 28, 46, 0.3);
}
.btn-modern::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.6s ease;
}
.btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(232, 28, 46, 0.4);
color: #ffffff;
text-decoration: none;
}
.btn-modern:hover::before {
left: 100%;
}
/* Animations */
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes badgeSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes lineExpand {
from {
width: 0;
}
to {
width: 50px;
}
}
/* Responsive Design */
@media (max-width: 991px) {
.about-content-modern {
padding-left: 0;
margin-top: 50px;
}
.section-title {
font-size: 2.2rem;
}
.about-image-main {
transform: none;
}
.about-image-main img {
height: 400px;
}
}
@media (max-width: 767px) {
.about-modern {
padding: 60px 0;
}
.section-title {
font-size: 1.9rem;
}
.about-description {
font-size: 16px;
}
.feature-item {
padding: 15px;
margin-bottom: 20px;
}
.feature-icon {
width: 45px;
height: 45px;
margin-right: 15px;
}
.feature-text h4 {
font-size: 16px;
}
.experience-badge {
padding: 20px 25px;
}
.experience-badge h3 {
font-size: 2rem;
}
}
.about-overlay {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(232, 28, 46, 0.3) 30%,
rgba(32, 44, 69, 0.7) 70%,
rgba(0, 0, 0, 0.9) 100%
);
display: flex;
align-items: center;
min-height: 100vh;
padding: 0;
margin: 0;
}
.min-vh-100 {
min-height: 100vh;
}
.about-content-left {
padding: 60px 0;
animation: fadeInUp 1.2s ease-out;
}
.section-subtitle {
color: #e81c2e;
font-size: 16px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.section-subtitle::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 80px;
height: 2px;
background: linear-gradient(90deg, #e81c2e, transparent);
}
.section-title-large {
color: #ffffff;
font-size: 4.5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 30px;
text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.8);
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #e0e0e0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: slideInFromLeft 1s ease-out 0.3s both;
}
.about-text-large {
color: #ffffff;
font-size: 20px;
line-height: 1.8;
margin-bottom: 50px;
opacity: 0.95;
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
max-width: 600px;
animation: slideInFromLeft 1s ease-out 0.5s both;
}
.about-features-modern {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-bottom: 50px;
animation: slideInFromLeft 1s ease-out 0.7s both;
}
.feature-item-modern {
display: flex;
align-items: flex-start;
padding: 25px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
border: 1px solid rgba(232, 28, 46, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
}
.feature-item-modern::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: linear-gradient(
135deg,
rgba(232, 28, 46, 0.1),
rgba(32, 44, 69, 0.1)
);
transition: width 0.4s ease;
}
.feature-item-modern:hover {
transform: translateY(-8px);
border-color: rgba(232, 28, 46, 0.5);
box-shadow: 0 20px 40px rgba(232, 28, 46, 0.2);
}
.feature-item-modern:hover::before {
width: 100%;
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #e81c2e, #ff4757);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.feature-item-modern:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 25px rgba(232, 28, 46, 0.4);
}
.feature-icon i {
color: #ffffff;
font-size: 20px;
}
.feature-content {
flex: 1;
position: relative;
z-index: 2;
}
.feature-content h4 {
color: #ffffff;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.feature-content p {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin: 0;
line-height: 1.5;
}
.about-cta {
display: flex;
gap: 20px;
flex-wrap: wrap;
animation: slideInFromLeft 1s ease-out 0.9s both;
}
.btn-primary-modern {
padding: 18px 40px;
background: linear-gradient(135deg, #e81c2e, #ff4757);
color: #ffffff;
text-decoration: none;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 15px 35px rgba(232, 28, 46, 0.3);
border: none;
position: relative;
overflow: hidden;
}
.btn-primary-modern::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ff4757, #e81c2e);
transition: left 0.4s ease;
}
.btn-primary-modern:hover {
color: #ffffff;
text-decoration: none;
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(232, 28, 46, 0.5);
}
.btn-primary-modern:hover::before {
left: 0;
}
.btn-outline-modern {
padding: 18px 40px;
background: transparent;
color: #ffffff;
text-decoration: none;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
}
.btn-outline-modern::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: left 0.4s ease;
}
.btn-outline-modern:hover {
color: #ffffff;
text-decoration: none;
border-color: rgba(255, 255, 255, 0.8);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 255, 255, 0.1);
}
.btn-outline-modern:hover::before {
left: 0;
}
.about-stats-modern {
padding: 60px 0;
animation: fadeInRight 1.2s ease-out 0.5s both;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.stat-card {
text-align: center;
padding: 40px 30px;
background: rgba(255, 255, 255, 0.08);
border-radius: 20px;
border: 1px solid rgba(232, 28, 46, 0.3);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #e81c2e, #ff4757);
}
.stat-card:hover {
transform: translateY(-15px) scale(1.05);
border-color: rgba(232, 28, 46, 0.6);
box-shadow: 0 30px 60px rgba(232, 28, 46, 0.25);
}
.stat-number-large {
font-size: 3.5rem;
font-weight: 900;
color: #e81c2e;
margin-bottom: 15px;
text-shadow: 2px 2px 10px rgba(232, 28, 46, 0.3);
background: linear-gradient(135deg, #e81c2e, #ff4757);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label-modern {
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
/* Advanced Animations */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromLeft {
0% {
opacity: 0;
transform: translateX(-60px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.min-vh-75 {
min-height: 75vh;
}
.about-content-left {
padding: 40px 0;
animation: slideInLeft 1s ease-out;
}
.section-subtitle {
color: #e81c2e;
font-size: 18px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-subtitle::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(45deg, #e81c2e, #ff4757);
border-radius: 2px;
}
.section-title {
color: #ffffff;
font-size: 3.5rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 25px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.about-description p {
color: #ffffff;
font-size: 18px;
line-height: 1.8;
margin-bottom: 30px;
opacity: 0.95;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.about-features {
margin-bottom: 40px;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 15px;
transition: all 0.3s ease;
padding: 10px 0;
}
.feature-item:hover {
transform: translateX(10px);
}
.feature-item i {
color: #e81c2e;
font-size: 20px;
margin-right: 15px;
width: 25px;
text-align: center;
}
.feature-item span {
color: #ffffff;
font-size: 16px;
font-weight: 500;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-custom-about {
display: inline-block;
padding: 15px 40px;
background: linear-gradient(45deg, #e81c2e, #ff4757);
color: #ffffff;
text-decoration: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.4s ease;
box-shadow: 0 10px 30px rgba(232, 28, 46, 0.4);
border: none;
position: relative;
overflow: hidden;
}
.btn-custom-about::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff4757, #e81c2e);
transition: all 0.4s ease;
z-index: -1;
}
.btn-custom-about:hover {
color: #ffffff;
text-decoration: none;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(232, 28, 46, 0.6);
}
.btn-custom-about:hover::before {
left: 0;
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 40px;
animation: slideInRight 1s ease-out;
}
.stat-item {
text-align: center;
padding: 30px 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(45deg, #e81c2e, #ff4757);
}
.stat-item:hover {
transform: translateY(-10px);
background: rgba(232, 28, 46, 0.2);
box-shadow: 0 20px 40px rgba(232, 28, 46, 0.3);
}
.stat-number {
font-size: 3rem;
font-weight: 900;
color: #e81c2e;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.stat-label {
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.9;
}
/* Animations */
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.section-title {
font-size: 3rem;
}
.about-stats {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 30px;
}
}
@media (max-width: 768px) {
.about-background {
background-attachment: scroll;
}
.about-overlay {
min-height: auto;
padding: 60px 0;
}
.section-title {
font-size: 2.5rem;
}
.about-description p {
font-size: 16px;
}
.about-stats {
grid-template-columns: 1fr;
gap: 15px;
padding: 20px;
margin-top: 40px;
}
.stat-number {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 2rem;
}
.btn-custom-about {
padding: 12px 30px;
font-size: 14px;
}
.stat-item {
padding: 20px 15px;
}
}
/*******************************/
/********* Service CSS *********/
/*******************************/
.service {
position: relative;
width: 100%;
padding: 80px 15px; /* Added horizontal padding for small screens */
background: #000;
}
/* === ROW FIX FOR 5 COLUMNS === */
.service-row {
display: flex;
flex-wrap: nowrap;
gap: 24px;
}
/* Each card = 20% */
.service-col {
flex: 0 0 20%;
max-width: 20%;
display: flex;
}
/* === SERVICE CARD === */
.service-item {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 35px 22px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 30px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.service-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
/* === ICON === */
.service-item i {
font-size: 44px;
color: #e81c2e;
margin-bottom: 18px;
transition: transform 0.3s ease;
}
.service-item:hover i {
transform: scale(1.1);
}
/* === TITLE === */
.service-item h3 {
color: #fff;
font-size: 18px;
font-weight: 600;
line-height: 1.25;
min-height: 52px;
margin-bottom: 15px;
transition: color 0.3s ease;
}
.service-item:hover h3 {
color: #e81c2e;
}
/* === TEXT === */
.service-item p {
color: #ccc;
font-size: 13px;
line-height: 1.5;
margin: 0;
}
/* =================== Responsive Breakpoints =================== */
/* Medium screens: 3 columns */
@media (max-width: 992px) {
.service-row {
flex-wrap: wrap;
gap: 20px;
}
.service-col {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.service-item {
padding: 30px 18px;
}
.service-item h3 {
font-size: 16px;
min-height: 48px;
}
.service-item p {
font-size: 12px;
}
.service-item i {
font-size: 38px;
margin-bottom: 14px;
}
}
/* Small screens: 2 columns */
@media (max-width: 600px) {
.service-col {
flex: 0 0 50%;
max-width: 50%;
}
.service-item {
padding: 25px 15px;
}
.service-item h3 {
font-size: 15px;
min-height: 44px;
}
.service-item p {
font-size: 12px;
}
.service-item i {
font-size: 34px;
margin-bottom: 12px;
}
}
/* Extra small screens: 1 column */
@media (max-width: 400px) {
.service-col {
flex: 0 0 100%;
max-width: 100%;
}
.service-item {
padding: 20px 12px;
}
.service-item h3 {
font-size: 14px;
min-height: auto;
}
.service-item p {
font-size: 11px;
}
.service-item i {
font-size: 30px;
margin-bottom: 10px;
}
.service {
padding: 60px 10px;
}
}
/*******************************/
/******** Location CSS *********/
/*******************************/
.location {
position: relative;
width: 100%;
padding: 45px 0;
}
.location .location-item {
display: flex;
margin-bottom: 30px;
}
.location .location-item i {
padding-top: 3px;
font-size: 30px;
color: #e81c2e;
}
.location .location-text {
padding-left: 15px;
}
.location .location-text h3 {
font-size: 18px;
font-weight: 700;
}
.location .location-text p {
margin-bottom: 5px;
}
.location .location-text p strong {
margin-right: 5px;
font-weight: 600;
}
.location .location-form {
padding: 45px 30px;
background: #e81c2e;
border-radius: 5px;
}
.location .location-form h3 {
color: #ffffff;
font-size: 25px;
font-weight: 700;
margin-bottom: 25px;
}
.location .location-form .control-group {
margin-bottom: 15px;
}
.location .location-form .form-control {
height: 45px;
color: #ffffff;
padding: 0 15px;
border-radius: 5px;
border: 1px solid #ffffff;
background: transparent;
}
.location .location-form .input-group {
margin-bottom: 15px;
}
.location .location-form .input-group .form-control {
margin-bottom: 0;
}
.location .location-form .input-group-text {
height: 45px;
display: flex;
align-items: center;
border-radius: 5px 0 0 5px;
border-right: none;
}
.location .location-form .input-group .form-control {
border-radius: 0 5px 5px 0;
border-left: none;
}
.location .location-form textarea.form-control {
height: 120px;
padding: 15px;
}
.location .location-form .form-control::placeholder {
color: #ffffff;
opacity: 1;
}
.location .location-form .form-control:-ms-input-placeholder,
.location .location-form .form-control::-ms-input-placeholder {
color: #ffffff;
}
.location .location-form .btn.btn-custom {
width: 100%;
color: #e81c2e;
background: #ffffff;
box-shadow: inset 0 0 0 0 #202c45;
}
.location .location-form .btn.btn-custom:hover {
color: #ffffff;
background: #e81c2e;
box-shadow: inset 400px 0 0 0 #202c45;
}
@media (min-width: 576px) and (max-width: 991.89px) {
.location .location-form .btn.btn-custom:hover {
box-shadow: inset 650px 0 0 0 #202c45;
}
}
/*******************************/
/********* Contact CSS *********/
/*******************************/
.contact {
position: relative;
width: 100%;
padding: 45px 0;
}
.contact .contact-info {
width: 100%;
margin-bottom: 45px;
padding: 35px 30px 10px 30px;
border-radius: 5px;
background: #202c45;
}
.contact .contact-info h2 {
color: #ffffff;
font-size: 25px;
font-weight: 700;
margin-bottom: 30px;
}
.contact .contact-info-item {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 30px;
}
.contact .contact-info-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 50px;
}
.contact .contact-info-icon i {
margin: 0;
color: #202c45;
font-size: 16px;
}
.contact .contact-info-text {
padding-left: 20px;
}
.contact .contact-info-text h3 {
margin: 0 0 5px 0;
color: #ffffff;
font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
}
.contact .contact-info-text p {
margin: 0;
color: #ffffff;
font-size: 16px;
font-weight: 500;
}
.contact .contact-form {
position: relative;
width: 100%;
margin-bottom: 45px;
}
.contact .contact-form input {
padding: 15px;
border-radius: 5px;
border: 1px solid #202c45;
}
.contact .contact-form textarea {
height: 125px;
padding: 8px 15px;
border-radius: 5px;
border: 1px solid #202c45;
}
.contact .help-block ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.contact iframe {
width: 100%;
height: 400px;
border-radius: 5px;
}
/*******************************/
/******* Single Post CSS *******/
/*******************************/
.single {
position: relative;
padding: 45px 0;
}
.single .single-content {
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
.single .single-content img {
margin-bottom: 20px;
width: 100%;
border-radius: 5px;
}
.single .single-tags {
margin: -5px -5px 41px -5px;
font-size: 0;
}
.single .single-tags a {
margin: 5px;
display: inline-block;
padding: 7px 15px;
font-size: 14px;
font-weight: 500;
color: #202c45;
border: 1px solid #202c45;
border-radius: 5px;
}
.single .single-tags a:hover {
color: #ffffff;
background: #e81c2e;
border-color: #e81c2e;
}
.single .single-bio {
padding: 30px;
background: #202c45;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 5px;
}
.single .single-bio-img {
width: 100%;
max-width: 115px;
padding: 15px;
background: #ffffff;
border-radius: 100px;
margin-bottom: 20px;
}
.single .single-bio-img img {
width: 100%;
border-radius: 100px;
}
.single .single-bio-text {
text-align: center;
}
.single .single-bio-text h3 {
color: #ffffff;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.single .single-bio-text p {
color: #ffffff;
margin: 0;
}
.single .single-bio-social {
margin-top: 20px;
display: flex;
}
.single .single-bio-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #202c45;
background: #ffffff;
border-radius: 40px;
margin-right: 5px;
transition: 0.5s;
}
.single .single-bio-social a:last-child {
margin: 0;
}
.single .single-bio-social a:hover {
color: #ffffff;
background: #e81c2e;
}
.single .single-related {
margin-bottom: 45px;
}
.single .single-related h2 {
font-size: 30px;
font-weight: 700;
margin-bottom: 25px;
}
.single .related-slider {
position: relative;
margin: 0 -15px;
width: calc(100% + 30px);
}
.single .related-slider .post-item {
margin: 0 15px;
}
.single .post-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.single .post-item .post-img {
width: 100%;
max-width: 80px;
}
.single .post-item .post-img img {
width: 100%;
border-radius: 5px;
}
.single .post-item .post-text {
padding-left: 15px;
}
.single .post-item .post-text a {
font-size: 17px;
font-weight: 500;
}
.single .post-item .post-text a:hover {
color: #e81c2e;
}
.single .post-item .post-meta {
display: flex;
margin-top: 8px;
}
.single .post-item .post-meta p {
display: inline-block;
margin: 0;
padding: 0 3px;
font-size: 14px;
font-weight: 400;
font-style: italic;
}
.single .post-item .post-meta p a {
margin-left: 5px;
color: #777777;
font-size: 14px;
font-weight: 400;
font-style: normal;
}
.single .related-slider .owl-nav {
position: absolute;
width: 90px;
top: -55px;
right: 15px;
display: flex;
}
.single .related-slider .owl-nav .owl-prev,
.single .related-slider .owl-nav .owl-next {
margin-left: 15px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: #202c45;
border-radius: 5px;
font-size: 16px;
transition: 0.3s;
}
.single .related-slider .owl-nav .owl-prev:hover,
.single .related-slider .owl-nav .owl-next:hover {
color: #ffffff;
background: #e81c2e;
}
.single .single-comment {
position: relative;
margin-bottom: 45px;
}
.single .single-comment h2 {
font-size: 30px;
font-weight: 700;
margin-bottom: 25px;
}
.single .comment-list {
list-style: none;
padding: 0;
}
.single .comment-child {
list-style: none;
}
.single .comment-body {
display: flex;
margin-bottom: 30px;
}
.single .comment-img {
width: 60px;
}
.single .comment-img img {
width: 100%;
border-radius: 60px;
}
.single .comment-text {
padding-left: 15px;
width: calc(100% - 60px);
}
.single .comment-text h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 3px;
}
.single .comment-text span {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 5px;
}
.single .comment-text .btn {
padding: 3px 10px;
font-size: 14px;
font-weight: 500;
color: #202c45;
background: #dddddd;
border-radius: 5px;
}
.single .comment-text .btn:hover {
color: #ffffff;
background: #e81c2e;
}
.single .comment-form {
position: relative;
}
.single .comment-form h2 {
font-size: 30px;
font-weight: 700;
margin-bottom: 25px;
}
.single .comment-form form {
padding: 30px;
background: #f3f6ff;
border-radius: 5px;
}
.single .comment-form form .form-group:last-child {
margin: 0;
}
.single .comment-form input,
.single .comment-form textarea {
border-radius: 5px;
border-color: #eeeeee;
}
.single .comment-form input:focus,
.single .comment-form textarea:focus {
border-color: #e81c2e;
}
.single .comment-form .btn {
border-radius: 45px;
}
/**********************************/
/*********** Sidebar CSS **********/
/**********************************/
.sidebar {
position: relative;
width: 100%;
}
@media (max-width: 991.98px) {
.sidebar {
margin-top: 45px;
}
}
.sidebar .sidebar-widget {
position: relative;
margin-bottom: 45px;
}
.sidebar .sidebar-widget .widget-title {
position: relative;
margin-bottom: 30px;
padding-bottom: 5px;
font-size: 25px;
font-weight: 700;
}
.sidebar .sidebar-widget .widget-title::after {
position: absolute;
content: "";
width: 60px;
height: 2px;
bottom: 0;
left: 0;
background: #e81c2e;
}
.sidebar .sidebar-widget .search-widget {
position: relative;
}
.sidebar .search-widget input {
height: 50px;
border: 1px solid #dddddd;
border-radius: 5px;
}
.sidebar .search-widget input:focus {
box-shadow: none;
border-color: #e81c2e;
}
.sidebar .search-widget .btn {
position: absolute;
top: 6px;
right: 15px;
height: 40px;
padding: 0;
font-size: 25px;
color: #202c45;
background: none;
border-radius: 0;
border: none;
transition: 0.3s;
}
.sidebar .search-widget .btn:hover {
color: #e81c2e;
}
.sidebar .sidebar-widget .recent-post {
position: relative;
}
.sidebar .sidebar-widget .tab-post {
position: relative;
}
.sidebar .tab-post .nav.nav-pills {
border-radius: 5px;
overflow: hidden;
}
.sidebar .tab-post .nav.nav-pills .nav-link {
color: #ffffff;
background: #202c45;
border-radius: 0;
}
.sidebar .tab-post .nav.nav-pills .nav-link:hover,
.sidebar .tab-post .nav.nav-pills .nav-link.active {
color: #ffffff;
background: #e81c2e;
}
.sidebar .tab-post .tab-content {
padding: 15px 0 0 0;
background: transparent;
}
.sidebar .tab-post .tab-content .container {
padding: 0;
}
.sidebar .sidebar-widget .category-widget {
position: relative;
}
.sidebar .category-widget ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar .category-widget ul li {
margin: 0 0 12px 22px;
}
.sidebar .category-widget ul li:last-child {
margin-bottom: 0;
}
.sidebar .category-widget ul li a {
display: inline-block;
line-height: 23px;
font-weight: 500;
letter-spacing: 1px;
}
.sidebar .category-widget ul li::before {
position: absolute;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #e81c2e;
left: 1px;
}
.sidebar .category-widget ul li span {
display: inline-block;
float: right;
}
.sidebar .sidebar-widget .tag-widget {
position: relative;
margin: -5px -5px;
}
.single .tag-widget a {
margin: 5px;
display: inline-block;
padding: 7px 15px;
font-size: 14px;
font-weight: 400;
color: #202c45;
border: 1px solid #202c45;
border-radius: 5px;
}
.single .tag-widget a:hover {
color: #ffffff;
background: #e81c2e;
border-color: #e81c2e;
}
.sidebar .image-widget {
display: block;
width: 100%;
overflow: hidden;
}
.sidebar .image-widget img {
max-width: 100%;
border-radius: 5px;
transition: 0.3s;
}
.sidebar .image-widget img:hover {
transform: scale(1.1);
}
/*******************************/
/********* Footer CSS **********/
/*******************************/
.footer {
position: relative;
margin-top: 0px;
padding-top: 90px;
background: #000000;
}
.footer .footer-contact,
.footer .footer-link,
.footer .footer-newsletter {
position: relative;
margin-bottom: 45px;
color: #ffffff;
}
.footer .footer-contact h2,
.footer .footer-link h2,
.footer .footer-newsletter h2 {
margin-bottom: 30px;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
color: #e81c2e;
}
.footer .footer-link a {
display: block;
margin-bottom: 10px;
color: #ffffff;
transition: 0.3s;
}
.footer .footer-link a::before {
position: relative;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 10px;
}
.footer .footer-link a:hover {
color: #e81c2e;
letter-spacing: 1px;
}
.footer .footer-contact p i {
width: 25px;
}
.footer .footer-social {
position: relative;
margin-top: 20px;
display: flex;
}
.footer .footer-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #202c45;
background: #ffffff;
border-radius: 40px;
margin-right: 5px;
transition: 0.5s;
}
.footer .footer-social a:last-child {
margin: 0;
}
.footer .footer-social a:hover {
color: #ffffff;
background: #e81c2e;
}
.footer .footer-newsletter form {
position: relative;
width: 100%;
}
.footer .footer-newsletter input {
margin-bottom: 15px;
height: 45px;
background: transparent;
border: 1px solid #ffffff;
border-radius: 5px;
}
.footer .footer-newsletter label {
margin-top: 5px;
color: #777777;
font-size: 14px;
letter-spacing: 1px;
}
.footer .footer-newsletter .btn.btn-custom {
width: 100%;
color: #202c45;
background: #ffffff;
box-shadow: inset 0 0 0 0 #e81c2e;
}
.footer .footer-newsletter .btn:hover {
color: #ffffff;
background: #e81c2e;
box-shadow: inset 200px 0 0 0 #e81c2e;
}
.footer .copyright {
text-align: center;
padding-top: 15px;
padding-bottom: 45px;
}
.footer .copyright p {
margin: 0;
color: #ffffff;
}
.footer .copyright p a {
color: #e81c2e;
font-weight: 700;
letter-spacing: 1px;
}
.footer .copyright p a:hover {
color: #ffffff;
}