/* ----------------------------------------------------------------------------------------
* Author : Awaiken
* Template Name : Inspaire - Architecture and Interior Design HTML Template
* File : CSS File
* Version : 1.0
* ---------------------------------------------------------------------------------------- */
/* Enhanced Brochure Integration Styles */
/* Service Highlights in Hero Section */
.service-highlights {
margin-top: 20px;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.service-list {
list-style: none;
padding: 0;
margin: 0;
}
.service-list li {
display: flex;
align-items: center;
margin-bottom: 8px;
color: #ffffff;
font-size: 14px;
font-weight: 500;
}
.service-list li:last-child {
margin-bottom: 0;
}
.service-list li i {
margin-right: 10px;
color: #87CEEB;
font-size: 10px;
width: 14px;
flex-shrink: 0;
}
/* Product Features Highlight */
.product-features-highlight {
margin-top: 40px;
padding: 40px 0;
}
.feature-item {
padding: 25px 15px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border-radius: 15px;
border: 1px solid rgba(135, 206, 235, 0.3);
transition: all 0.3s ease;
height: 100%;
}
.feature-item:hover {
transform: translateY(-5px);
background: linear-gradient(135deg, rgba(135, 206, 235, 0.1), rgba(135, 206, 235, 0.05));
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.feature-item i {
font-size: 32px;
color: #87CEEB;
margin-bottom: 15px;
}
.feature-item h4 {
font-size: 18px;
font-weight: 600;
color: #192324;
margin-bottom: 10px;
}
.feature-item p {
font-size: 14px;
color: #666;
margin-bottom: 0;
}
/* Enhanced Warehousing Details */
.warehousing-details {
margin-top: 25px;
padding: 20px;
background: linear-gradient(135deg, rgba(135, 206, 235, 0.1), rgba(135, 206, 235, 0.05));
border-radius: 10px;
border-left: 4px solid #87CEEB;
}
.warehousing-details h4 {
font-size: 18px;
font-weight: 600;
color: #192324;
margin-bottom: 12px;
}
.warehousing-details p {
font-size: 15px;
color: #666;
margin-bottom: 0;
line-height: 1.6;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.service-highlights {
margin-top: 15px;
padding: 12px 15px;
}
.service-list li {
font-size: 13px;
margin-bottom: 6px;
}
.service-list li i {
font-size: 9px;
width: 12px;
margin-right: 8px;
}
.product-features-highlight {
margin-top: 30px;
padding: 30px 0;
}
.feature-item {
margin-bottom: 20px;
padding: 20px 15px;
}
.feature-item i {
font-size: 28px;
}
.warehousing-details {
padding: 15px;
}
}
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Why Choose Us css
07. Our Services css
08. Intro Video css
09. Latest Project css
10. How We Work css
11. Our Skills css
12. Our Testimonials css
13. Our Blog css
14. Footer css
15. About Us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Image Gallery css
23. FAQs Page css
24. Contact Us Page css
25. 404 Error Page css
26. Responsive css
-------------------------------------------------------------------------------------- */
/************************************/
/*** 01. Global Variables ***/
/************************************/
:root{
--primary-color : #192324;
--secondery-color : #F8F8F8;
--text-color : #283132;
--accent-color : #4284d6;
--white-color : #FFFFFF;
--divider-color : #EAF0EC;
--dark-divider-color : #FFFFFF1A;
--error-color : rgb(230, 87, 87);
--default-font : "Hanken Grotesk", sans-serif;
/* RGB values for transparency effects */
--primary-color-rgb : 25, 35, 36;
--accent-color-rgb : 66, 132, 214;
}
/************************************/
/*** 02. General css ***/
/************************************/
body{
font-family: var(--default-font);
font-size: 16px;
font-weight: 400;
line-height: 1.6em;
background-color: var(--white-color);
color: var(--text-color);
}
p{
line-height: 1.7em;
margin-bottom: 1.6em;
}
h1,
h2,
h3,
h4,
h5,
h6{
margin :0;
font-weight: 700;
line-height: 1.1em;
color: var(--primary-color);
}
figure{
margin: 0;
}
img{
max-width: 100%;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
outline: 0;
}
a:focus{
text-decoration: none;
outline: 0;
}
html,
body{
width: 100%;
overflow-x: clip;
scroll-behavior: smooth;
scroll-padding-top: 100px; /* Compensate for sticky header height */
}
/* Additional scroll offset for better section visibility */
section[id] {
scroll-margin-top: 120px; /* Extra margin for sections with IDs */
}
/* Ensure smooth scrolling for anchor links */
a[href^="#"] {
scroll-behavior: smooth;
}
.container{
max-width: 1300px;
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
padding-right: 15px;
padding-left: 15px;
}
.image-anime{
position: relative;
overflow: hidden;
}
.image-anime:after{
content: "";
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255,255,255,.3);
transform: translate(-50%,-50%) rotate(-45deg);
z-index: 1;
}
.image-anime:hover:after{
height: 250%;
transition: all 600ms linear;
background-color: transparent;
}
.reveal{
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
visibility: hidden;
overflow: hidden;
}
.reveal img{
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transform-origin: left;
transform-origin: left;
}
.row{
margin-right: -15px;
margin-left: -15px;
}
.row > *{
padding-right: 15px;
padding-left: 15px;
}
.row.no-gutters{
margin-right: 0px;
margin-left: 0px;
}
.row.no-gutters > *{
padding-right: 0px;
padding-left: 0px;
}
.btn-default{
position: relative;
display: inline-block;
background: var(--accent-color);
color: var(--white-color);
font-size: 16px;
font-weight: 700;
line-height: 1em;
text-transform: capitalize;
border: none;
padding: 17px 46px 17px 20px;
border-radius: 10px;
transition: all 0.5s ease-in-out;
overflow: hidden;
z-index: 0;
}
.btn-default:hover{
background: transparent;
color: var(--white-color);
}
.btn-default::before{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 16px;
height: 16px;
background-image: url(../images/arrow-white.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transform: translate(-20px, -50%);
transition: all 0.4s ease-in-out;
}
.btn-default:hover::before{
transform: translate(-18px, -50%);
}
.btn-default::after{
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: -15%;
right: 0;
width: 0;
height: 106%;
background: var(--primary-color);
transform: skew(45deg);
transition: all 0.4s ease-in-out;
z-index: -1;
}
.btn-default:hover:after{
width: 100%;
transform: skew(0deg);
left: 0;
}
.btn-default.btn-highlighted{
background-color: var(--white-color);
color: var(--accent-color);
}
.btn-default.btn-highlighted:hover{
color: var(--white-color);
}
.btn-default.btn-highlighted::before{
background-image: url(../images/arrow-accent.svg);
}
.btn-default.btn-highlighted:hover::before{
filter: brightness(0) invert(1);
}
.btn-default.btn-highlighted::after{
background-color: var(--accent-color);
}
.cb-cursor:before{
background: var(--accent-color);
}
/* Hide default cursor globally */
*, *:before, *:after {
cursor: none !important;
}
/* Increase magic cursor size */
.cb-cursor.-visible:before {
transform: scale(0.4) rotate(90deg) !important;
-webkit-transform: scale(0.4) rotate(90deg) !important;
-moz-transform: scale(0.4) rotate(90deg) !important;
-ms-transform: scale(0.4) rotate(90deg) !important;
-o-transform: scale(0.4) rotate(90deg) !important;
}
.cb-cursor.-visible.-active:before {
transform: scale(0.46) rotate(90deg) !important;
-webkit-transform: scale(0.46) rotate(90deg) !important;
-moz-transform: scale(0.46) rotate(90deg) !important;
-ms-transform: scale(0.46) rotate(90deg) !important;
-o-transform: scale(0.46) rotate(90deg) !important;
}
.cb-cursor.-text:before {
transform: scale(2.5) rotate(90deg) !important;
-webkit-transform: scale(2.5) rotate(90deg) !important;
-moz-transform: scale(2.5) rotate(90deg) !important;
-ms-transform: scale(2.5) rotate(90deg) !important;
-o-transform: scale(2.5) rotate(90deg) !important;
}
.cb-cursor.-text.-active:before {
transform: scale(2.3) rotate(90deg) !important;
-webkit-transform: scale(2.3) rotate(90deg) !important;
-moz-transform: scale(2.3) rotate(90deg) !important;
-ms-transform: scale(2.3) rotate(90deg) !important;
-o-transform: scale(2.3) rotate(90deg) !important;
}
.cb-cursor.-opaque:before {
transform: scale(1.8) rotate(90deg) !important;
-webkit-transform: scale(1.8) rotate(90deg) !important;
-moz-transform: scale(1.8) rotate(90deg) !important;
-ms-transform: scale(1.8) rotate(90deg) !important;
-o-transform: scale(1.8) rotate(90deg) !important;
}
.cb-cursor.-opaque.-active:before {
transform: scale(1.6) rotate(90deg) !important;
-webkit-transform: scale(1.6) rotate(90deg) !important;
-moz-transform: scale(1.6) rotate(90deg) !important;
-ms-transform: scale(1.6) rotate(90deg) !important;
-o-transform: scale(1.6) rotate(90deg) !important;
}
.cb-cursor.-lg:before {
transform: scale(3) rotate(90deg) !important;
-webkit-transform: scale(3) rotate(90deg) !important;
-moz-transform: scale(3) rotate(90deg) !important;
-ms-transform: scale(3) rotate(90deg) !important;
-o-transform: scale(3) rotate(90deg) !important;
}
/* Additional responsive height rules for hero slider */
@media (max-height: 600px) {
.hero.hero-slider-layout .hero-slide{
height: calc(100vh + 40px);
min-height: 640px;
}
.hero.hero-slider-layout .row.align-items-center{
min-height: calc(100vh + 40px);
height: calc(100vh + 40px);
align-items: flex-end !important;
padding-bottom: 60px;
}
}
@media (max-height: 500px) {
.hero.hero-slider-layout .hero-slide{
height: calc(100vh + 40px);
min-height: 540px;
}
}
@media (max-height: 400px) and (orientation: landscape) {
.hero.hero-slider-layout .hero-slide{
height: calc(100vh + 40px);
min-height: 440px;
}
.hero-content .section-title h1 {
font-size: 1.75rem !important;
}
.hero-content .section-title p {
font-size: 14px !important;
}
}
.loading-container,
.loading{
height: 100px;
position: relative;
width: 100px;
border-radius: 100%;
}
.loading-container{
margin: 40px auto;
}
.loading{
border: 1px solid transparent;
border-color: transparent var(--white-color) transparent var(--white-color);
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading-container:hover .loading,
.loading-container .loading{
transition: all 0.5s ease-in-out;
}
#loading-icon{
position: absolute;
top: 50%;
left: 50%;
max-width: 66px;
transform: translate(-50%, -50%);
}
@keyframes rotate-loading{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.section-row{
margin-bottom: 80px;
}
.section-row .section-title{
margin-bottom: 0;
margin-right: 30px;
}
.section-btn{
text-align: end;
}
.section-title-content{
margin-left: 120px;
}
.section-title-content p{
margin: 0;
}
.section-title{
margin-bottom: 40px;
}
.section-title h3{
display: inline-block;
position: relative;
font-size: 16px;
font-weight: 500;
line-height: 1.6em;
text-transform: capitalize;
color: var(--accent-color);
padding-left: 35px;
margin-bottom: 20px;
}
.section-title h3::before{
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background: url('../images/icon-sub-heading.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
width: 24px;
height: 5px;
}
.section-title h1{
font-size: 64px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0;
cursor: none;
}
.section-title h2{
font-size: 38px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0;
cursor: none;
}
.section-title h1 span,
.section-title h2 span{
color: var(--accent-color);
}
.section-title p{
margin-top: 30px;
margin-bottom: 0;
}
.section-title-content.dark-section p,
.section-title.dark-section p,
.section-title.dark-section h2,
.section-title.dark-section h3{
color: var(--white-color);
}
.help-block.with-errors ul{
margin: 0;
text-align: left;
}
.help-block.with-errors ul li{
color: var(--error-color);
font-weight: 500;
font-size: 14px;
}
/************************************/
/**** 03. Header css ****/
/************************************/
header.main-header{
position: relative;
z-index: 100;
}
header.main-header .header-sticky{
position: relative;
top: 0;
z-index: 100;
}
header.main-header .header-sticky.hide{
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;
border-radius: 0;
}
header.main-header .header-sticky.active{
position: fixed;
top: 0;
left: 0;
right: 0;
border-radius: 0;
transform: translateY(0);
background: transparent;
border-bottom: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: all 0.3s ease-in-out;
}
.navbar{
padding: 9px 0;
align-items: center;
border-bottom: none;
}
header.main-header .header-sticky.active .navbar{
border-bottom: none;
padding: 7px 0;
transition: all 0.3s ease-in-out;
}
header.main-header .header-sticky.active .main-menu ul li a{
color: var(--white-color) !important;
}
header.main-header .header-sticky.active .main-menu ul li a:hover,
header.main-header .header-sticky.active .main-menu ul li a:focus{
color: var(--accent-color) !important;
}
header.main-header .header-sticky.active .main-menu ul li a.active,
header.main-header .header-sticky.active .main-menu ul li.current-menu-item > a,
header.main-header .header-sticky.active .main-menu ul li.current_page_item > a{
color: var(--accent-color) !important;
}
/* Override transparent header styles for active menu items when sticky */
header.main-header.transparent-header .header-sticky.active .main-menu ul li a.active,
header.main-header.transparent-header .header-sticky.active .main-menu ul li.current-menu-item > a,
header.main-header.transparent-header .header-sticky.active .main-menu ul li.current_page_item > a{
color: var(--accent-color) !important;
text-shadow: none !important;
font-weight: 600 !important;
}
header.main-header .header-sticky.active .navbar-brand img{
max-height: 50px;
width: auto;
transition: all 0.3s ease-in-out;
}
header.main-header .header-sticky.active .navbar-brand{
padding: 4px 12px;
}
/* Transparent Header Styles */
header.main-header.transparent-header .header-sticky{
background: transparent;
border-bottom: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
header.main-header.transparent-header .navbar{
border-bottom: none;
}
header.main-header.transparent-header .main-menu ul li a{
color: #fff !important;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.3);
font-weight: 600;
transition: all 0.3s ease;
}
header.main-header.transparent-header .main-menu ul li a:hover,
header.main-header.transparent-header .main-menu ul li a:focus{
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.4);
transform: translateY(-1px);
}
header.main-header.transparent-header .navbar-brand img{
filter: brightness(0) invert(1) drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
transition: filter 0.3s ease;
}
header.main-header.transparent-header .navbar-brand:hover img{
filter: brightness(0) invert(1) drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.7));
}
/* When transparent header becomes sticky, keep transparent style */
header.main-header.transparent-header .header-sticky.active{
background: transparent;
border-bottom: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
header.main-header.transparent-header .header-sticky.active .main-menu ul li a{
color: #333 !important;
text-shadow: none !important;
font-weight: 600 !important;
transform: none !important;
}
header.main-header.transparent-header .header-sticky.active .main-menu ul li a:hover,
header.main-header.transparent-header .header-sticky.active .main-menu ul li a:focus{
color: var(--accent-color) !important;
text-shadow: none !important;
transform: translateY(-1px) !important;
}
header.main-header.transparent-header .header-sticky.active .navbar-brand img{
filter: brightness(0) invert(1) drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5)) !important;
transition: all 0.3s ease-in-out;
}
.navbar-brand{
padding: 5px 15px;
margin: 0;
}
.navbar-brand img{
max-height: 50px;
width: auto;
}
.main-menu .nav-menu-wrapper{
flex: 1;
text-align: center;
margin-left: 40px;
}
.main-menu .nav-menu-wrapper > ul{
align-items: center;
display: inline-flex;
}
.main-menu ul li{
margin: 0 6px;
position: relative;
}
.main-menu ul li a{
font-family: var(--accent-font);
font-size: 14px;
font-weight: 500;
padding: 10px 14px !important;
color: #1a1a1a;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease-in-out;
position: relative;
text-decoration: none;
}
.main-menu ul li.submenu > a:after{
content: '\f107';
font-family: 'FontAwesome';
font-weight: 900;
font-size: 14px;
margin-left: 8px;
}
.main-menu ul li a::after{
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent-color);
transition: all 0.3s ease-in-out;
transform: translateX(-50%);
}
.main-menu ul li a:hover,
.main-menu ul li a:focus{
color: var(--accent-color);
font-weight: 600;
}
.main-menu ul li a:hover::after,
.main-menu ul li a:focus::after{
width: 80%;
}
/* Active state styling */
.main-menu ul li a.active,
.main-menu ul li.current-menu-item > a,
.main-menu ul li.current_page_item > a{
color: var(--accent-color);
font-weight: 600;
}
.main-menu ul li a.active::after,
.main-menu ul li.current-menu-item > a::after,
.main-menu ul li.current_page_item > a::after{
width: 80%;
}
.main-menu ul ul{
visibility: hidden;
opacity: 0;
transform: scaleY(0.8);
transform-origin: top;
padding: 0;
margin: 0;
list-style: none;
width: 230px;
border-radius: 20px;
position: absolute;
left: 0;
top: 100%;
background-color: var(--accent-color);
transition: all 0.3s ease-in-out;
text-align: left;
}
.main-menu ul li.submenu:first-child ul{
width: 230px;
}
.main-menu ul ul ul{
left: 100%;
top: 0;
text-align: left;
}
.main-menu ul li:hover > ul{
visibility: visible;
opacity: 1;
transform: scaleY(1);
padding: 5px 0;
}
.main-menu ul li.submenu ul li.submenu > a:after{
content: '\f105';
float: right;
}
.main-menu ul ul li{
margin: 0;
padding: 0;
}
.main-menu ul ul li a{
color: #1a1a1a;
padding: 6px 20px !important;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease-in-out;
position: relative;
text-decoration: none;
}
.main-menu ul li:hover > ul{
visibility: visible;
opacity: 1;
transform: scaleY(1);
padding: 5px 0;
}
.main-menu ul ul li a::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--primary-color);
transition: all 0.3s ease-in-out;
}
.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
color: var(--primary-color);
background-color: transparent;
padding: 6px 20px 6px 23px !important;
font-weight: 600;
}
.main-menu ul ul li a:hover::after,
.main-menu ul ul li a:focus::after{
width: 100%;
}
/* Active state for dropdown items */
.main-menu ul ul li a.active,
.main-menu ul ul li.current-menu-item > a,
.main-menu ul ul li.current_page_item > a{
color: var(--primary-color);
font-weight: 600;
}
.main-menu ul ul li a.active::after,
.main-menu ul ul li.current-menu-item > a::after,
.main-menu ul ul li.current_page_item > a::after{
width: 100%;
}
.responsive-menu,
.navbar-toggle{
display: none;
}
.responsive-menu{
top: 0;
position: relative;
}
.slicknav_btn{
background: var(--accent-color);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0;
border-radius: 0;
}
.slicknav_icon .slicknav_icon-bar{
display: block;
width: 100%;
height: 3px;
width: 22px;
background-color: var(--white-color);
border-radius: 6px;
margin: 4px auto !important;
transition: all 0.1s ease-in-out;
}
.slicknav_icon .slicknav_icon-bar:first-child{
margin-top: 0 !important;
}
.slicknav_icon .slicknav_icon-bar:last-child{
margin-bottom: 0 !important;
}
.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
transform: rotate(-45deg) translate(-5px, 5px);
}
.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
opacity: 0;
}
.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
transform: rotate(45deg) translate(-5px, -5px);
}
.slicknav_menu{
position: absolute;
width: 100%;
padding: 0;
background: var(--accent-color);
}
.slicknav_menu ul{
margin: 5px 0;
}
.slicknav_menu ul ul{
margin: 0;
}
.slicknav_nav .slicknav_row,
.slicknav_nav li a{
position: relative;
font-family: var(--accent-font);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 20px;
color: var(--white-color);
line-height: normal;
margin: 0;
border-radius: 0 !important;
transition: all 0.3s ease-in-out;
}
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
background-color: transparent;
color: var(--primary-color);
}
.slicknav_menu ul ul li a{
padding: 10px 20px 10px 30px;
}
.slicknav_arrow{
font-size: 0 !important;
}
.slicknav_arrow:after{
content: '\f107';
font-family: 'FontAwesome';
font-weight: 900;
font-size: 12px;
margin-left: 8px;
color: var(--white-color);
position: absolute;
right: 15px;
top: 15px;
transition: all 0.3s ease-out;
}
.slicknav_open > a .slicknav_arrow:after{
transform: rotate(-180deg);
color: var(--primary-color);
}
/************************************/
/*** 04. Hero css ***/
/************************************/
.hero{
position: relative;
background: url('../images/hero-bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 280px 0 250px;
min-height: 100vh;
margin-top: -118px;
}
.hero::before{
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
height: 100%;
width: 100%;
z-index: 1;
}
.hero.hero-video .hero-bg-video{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.hero.hero-video .hero-bg-video video{
width: 100%;
height: 100%;
object-fit: cover;
}
.hero.hero-slider-layout{
background: none;
padding: 0;
}
.hero.hero-slider-layout .hero-slide{
position: relative;
padding: 0;
height: calc(100vh + 40px);
min-height: calc(100vh + 40px);
display: flex;
align-items: center;
}
.hero.hero-slider-layout .hero-slide::before{
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
width: 100%;
height: 100%;
z-index: 1;
}
.hero.hero-slider-layout .hero-slide .hero-slider-image{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.hero.hero-slider-layout .hero-slide .hero-slider-image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.hero.hero-slider-layout .hero-pagination{
position: absolute;
bottom: 20px;
text-align: center;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
width: 12px;
height: 12px;
background: var(--white-color);
opacity: 1;
transition: all 0.3s ease-in-out;
margin: 0 5px;
}
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
background-color: var(--accent-color);
}
.hero-content{
position: relative;
z-index: 2;
}
.hero.hero-slider-layout .row.align-items-center{
align-items: flex-end !important;
min-height: calc(100vh + 40px);
height: calc(100vh + 40px);
padding-bottom: 80px;
}
.hero-content .section-title h3,
.hero-content .section-title h1{
color: var(--white-color);
}
.hero-content .section-title h1{
font-size: 42px;
margin-bottom: 0;
}
.hero-content .section-title h3{
margin-bottom: 12px;
}
.hero-content .section-title p{
font-size: 18px;
color: var(--white-color);
width: 100%;
max-width: 600px;
margin-top: 15px;
}
.hero-content .section-title h3::before{
filter: brightness(0) invert(1);
}
.hero-content .btn-default.btn-highlighted{
margin-left: 30px;
}
/* Hide CTA buttons in hero slider */
.hero.hero-slider-layout .hero-btn {
display: none;
}
/* Hide CTA button in header */
.header-btn {
display: none !important;
}
/* Hero Scroll Arrow */
.hero-scroll-arrow {
position: absolute;
bottom: 20px;
right: calc(((100vw - 1300px) / 2) + 15px);
z-index: 3;
}
.hero-scroll-arrow a {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
text-decoration: none;
transition: all 0.3s ease;
}
.hero-scroll-arrow a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
background: url('../images/icon-sub-heading.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: brightness(0) invert(1);
width: 24px;
height: 5px;
animation: bounce 2s infinite;
}
.hero-scroll-arrow a:hover::before {
transform: translate(-50%, -50%) rotate(90deg) translateY(-2px);
}
.hero-scroll-arrow a i {
display: none;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-3px);
}
}
/************************************/
/*** 05. About Us css ***/
/************************************/
.about-us{
background-image: url('../images/section-bg-shape-1.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
padding: 100px 0;
}
.about-us-images{
position: relative;
background-image: url(../images/about-us-bg-shape.svg);
background-repeat: no-repeat;
background-position: left 60px bottom 40px;
background-size: auto;
padding-right: 100px;
padding-bottom: 180px;
margin-right: 30px;
}
.about-img-1 figure,
.about-img-2 figure{
display: block;
}
.about-img-1 img{
width: 100%;
object-fit: cover;
aspect-ratio: 1 / 0.76;
}
.about-img-2{
position: absolute;
width: 100%;
max-width: 385px;
bottom: 0;
right: 0;
}
.about-img-2 img{
width: 100%;
object-fit: cover;
aspect-ratio: 1 / 0.76;
}
.experience-counter{
position: absolute;
top: 0;
left: 0;
height: 152px;
width: 152px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
align-items: center;
background-color: var(--accent-color);
border: 6px solid var(--white-color);
transform: translate(-50%, -6px);
border-radius: 50%;
}
.experience-counter h3{
font-size: 34px;
color: var(--white-color);
text-align: center;
width: 100%;
margin-bottom: 5px;
}
.experience-counter p{
font-weight: 600;
line-height: 1.4em;
text-transform: capitalize;
color: var(--white-color);
text-align: center;
margin-bottom: 0;
}
.feedback-counter{
position: absolute;
top: 0;
right: 0;
transform: rotate(-180deg) translate(20px, -20px);
writing-mode: vertical-rl;
display: flex;
align-items: center;
}
.feedback-counter p{
font-size: 16px;
font-weight: 500;
color: var(--white-color);
height: 60px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--accent-color);
border-radius: 50%;
margin: 0 0 15px 0;
transition: all 0.3s ease-in-out;
}
.feedback-counter:hover p{
background-color: var(--primary-color);
}
.feedback-counter h3{
font-size: 18px;
font-weight: 500;
text-transform: capitalize;
width: calc(100% - 75px);
}
.about-us-content-body{
position: relative;
display: flex;
flex-wrap: wrap;
gap: 80px;
}
.about-us-content-body::before{
content: '';
position: absolute;
right: 50%;
top: 0;
bottom: 0;
transform: translateX(-50%);
border: 1px solid var(--divider-color);
width: 1px;
height: 100%;
}
.about-us-content-info{
width: calc(50% - 40px);
}
.about-us-content-list{
margin-bottom: 40px;
}
.about-us-content-list ul{
padding: 0;
margin: 0;
list-style: none;
}
.about-us-content-list ul li{
position: relative;
font-weight: 500;
color: var(--primary-color);
padding-left: 30px;
margin-bottom: 15px;
}
.about-us-content-list ul li:last-child{
margin-bottom: 0;
}
.about-us-content-list ul li::before{
content: '\f058';
position: absolute;
font-family: 'FontAwesome';
font-size: 20px;
font-weight: 900;
line-height: normal;
color: var(--accent-color);
display: inline-block;
top: 2px;
left: 0;
}
.about-us-content-list ul li:last-child{
margin-bottom: 0;
}
.about-us-content-list ul li::before{
content: '\f058';
position: absolute;
font-family: 'FontAwesome';
font-size: 20px;
font-weight: 900;
line-height: normal;
color: var(--accent-color);
display: inline-block;
top: 2px;
left: 0;
}
.about-us-contact-list{
width: calc(50% - 40px);
}
.about-contact-item{
display: flex;
align-items: center;
margin-bottom: 40px;
}
.about-contact-item:last-child{
margin-bottom: 0;
}
.about-contact-item .icon-box{
width: 40px;
height: 40px;
background-color: var(--accent-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
transition: all 0.3s ease-in-out;
}
.about-contact-item:hover .icon-box{
background-color: var(--primary-color);
}
.about-contact-item .icon-box figure{
display: block;
border-radius: 50%;
overflow: hidden;
}
.about-contact-item .icon-box img{
max-width: 40px;
border-radius: 50%;
}
.about-contact-item .icon-box i{
font-size: 18px;
color: var(--white-color);
}
.about-contact-content{
width: calc(100% - 55px);
}
.about-contact-content h3{
font-size: 20px;
text-transform: capitalize;
}
.about-contact-content p{
font-weight: 500;
color: var(--primary-color);
text-transform: capitalize;
margin-bottom: 0;
}
/************************************/
/*** 06. Why Choose Us css ***/
/************************************/
.why-choose-us{
padding: 100px 0;
background-color: var(--secondery-color);
background-image: url('../images/section-bg-shape-2.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.why-choose-item{
display: flex;
border-bottom: 1px solid var(--divider-color);
margin-bottom: 20px;
padding-bottom: 20px;
}
.why-choose-item:last-child{
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.why-choose-item .icon-box{
position: relative;
width: 60px;
height: 60px;
background-color: #0a2838;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
transform: rotate(90deg);
transition: all 0.4s ease-in-out;
}
.why-choose-item:hover .icon-box{
background-color: transparent;
}
.why-choose-item .icon-box::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--primary-color);
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
height: 100%;
width: 100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
}
.why-choose-item:hover .icon-box::before{
transform: scale(1);
}
.why-choose-item .icon-box img{
max-width: 24px;
z-index: 1;
transition: all 0.3s ease-in-out;
}
.why-choose-item:hover .icon-box img{
filter: brightness(0) invert(1);
}
.why-choose-item-content{
width: calc(100% - 80px);
}
.why-choose-item-content h3{
font-size: 20px;
text-transform: capitalize;
margin-bottom: 10px;
}
.why-choose-item-content p{
color: var(--primary-color);
margin-bottom: 0;
}
.why-choose-images{
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-left: 30px;
}
.why-choose-img-box-1,
.why-choose-img-box-2{
display: flex;
gap: 20px;
width: 100%;
}
.why-choose-img-1 figure,
.why-choose-img-2 figure,
.why-choose-img-3 figure,
.why-choose-img-4 figure{
display: block;
}
.why-choose-img-1{
width: calc(57% - 10px);
}
.why-choose-img-1 img{
width: 100%;
aspect-ratio: 1 / 0.756;
object-fit: cover;
}
.why-choose-img-2{
width: calc(43% - 10px);
}
.why-choose-img-2 img{
width: 100%;
aspect-ratio: 1 / 1.01;
object-fit: cover;
}
.why-choose-img-3{
width: calc(67% - 10px);
}
.why-choose-img-3 img{
width: 100%;
aspect-ratio: 1 / 0.746;
object-fit: cover;
}
.why-choose-img-4{
width: calc(33% - 10px);
}
.why-choose-img-4 img{
width: 100%;
aspect-ratio: 1 / 1.55;
object-fit: cover;
}
/************************************/
/*** 07. Our Services css ***/
/************************************/
.our-services{
padding: 100px 0;
}
.service-item{
position: relative;
height: calc(100% - 30px);
max-height: 350px;
margin-bottom: 30px;
-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
overflow: hidden;
transition: all 0.4s ease-in-out;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
}
.service-item:hover{
transform: rotate(3deg);
}
.service-image a{
display: block;
cursor: none;
}
.service-image a figure::before{
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 105%);
height: 100%;
width: 100%;
z-index: 1;
transition: all 0.3s ease-in-out;
}
.service-image img{
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1 / 1.1;
transition: all 0.4s ease-in-out;
}
.service-item:hover .service-image img{
transform: scale(1.1) rotate(5deg);
}
.service-item:hover .service-content p{
opacity: 1;
transform: translateY(0);
}
/* HEXaREL Style Layout - 3 Routers */
.product-features {
position: relative;
overflow: hidden;
}
.hexaouter {
position: relative;
float: left;
width: 32.3%;
min-height: 430px;
height: 430px;
left: 100px;
}
.hex {
position: absolute;
margin: 10px;
width: 113px;
top: 0;
height: 197px;
transition: 0.5s;
border-radius: 1em/.5em;
background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(35, 63, 136, 0.3);
}
.hex:hover {
top: -10px;
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(35, 63, 136, 0.4);
}
/* Icon animation enhancement */
.hex .tekst i {
transition: transform 0.3s ease;
}
.hex:hover .tekst i {
transform: scale(1.2) rotate(5deg);
}
/* Category-specific hex colors */
.hex.production {
background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
}
.hex.sustainability {
background: linear-gradient(135deg, #228B22 0%, #32CD32 100%);
}
.hex.quality {
background: linear-gradient(135deg, #8B4513 0%, #CD853F 100%);
}
.hex.performance {
background: linear-gradient(135deg, #4B0082 0%, #8A2BE2 100%);
}
.hex.infrastructure {
background: linear-gradient(135deg, #2F4F4F 0%, #708090 100%);
}
.hex.btmmove {
background: #233f88;
top: 205px;
}
.hex.btmmove:hover {
top: 215px;
}
.hex.btmmove.center {
position: absolute;
left: 179px;
top: 102px;
}
.hex.btmmove.center:hover {
position: absolute;
left: 179px;
top: 102px;
}
.hex:before,
.hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hoverborder {
opacity: 0;
background: url(/images/dotted-hexa.png) left top no-repeat;
width: 209px;
z-index: 9;
left: -48px;
top: 11px;
height: 179px;
transition: 0.5s;
position: absolute;
}
.hex:hover .hoverborder {
opacity: 1;
}
.tekst {
position: absolute;
z-index: 1;
justify-content: center;
display: block;
text-align: center;
transition: 0.5s;
padding-top: 45px;
height: 100%;
width: 100%;
opacity: 1;
color: #fff;
font-size: 14px;
line-height: 1.2;
text-transform: uppercase;
}
/* Text color for different hexagon types */
.hex .tekst {
color: #fff; /* White text for dark hexagons */
}
.hex.greencolor .tekst {
color: #000; /* Black text for green hexagons */
}
.hex.btmmove .tekst {
color: #fff; /* White text for dark blue hexagons */
}
.tekst i {
width: auto;
margin-bottom: 10px;
display: block;
}
/* Icon colors for different hexagon types */
.hex .tekst i {
color: #fff; /* White icons for dark hexagons */
font-size: 30px;
margin-bottom: 10px;
display: block;
}
.hex.greencolor .tekst i {
color: #000; /* Black icons for green hexagons */
font-size: 30px;
margin-bottom: 10px;
display: block;
}
.hex.btmmove .tekst i {
color: #fff; /* White icons for dark blue hexagons */
font-size: 30px;
margin-bottom: 10px;
display: block;
}
.content {
position: absolute;
z-index: 1;
justify-content: center;
display: flex;
font-size: 13px;
text-align: center;
align-items: center;
transition: 0.5s;
height: 100%;
width: 100%;
opacity: 0;
line-height: 1.4;
}
/* Content text color for different hexagon types */
.hex .content {
color: #fff; /* White text for dark hexagons */
}
.hex.greencolor .content {
color: #000; /* Black text for green hexagons */
}
.hex.btmmove .content {
color: #fff; /* White text for dark blue hexagons */
}
.hex:hover .tekst {
opacity: 0;
}
.hex:hover .content {
opacity: 1;
}
.hex.greencolor {
background: var(--accent-color);
}
.hex.greencolor .tekst.fontcolor {
color: var(--white-color);
}
.hex.greencolor .content.fontcolor {
color: var(--white-color);
}
/* Responsive adjustments */
@media only screen and (max-width: 1200px) {
.hexaouter {
width: 39%;
}
}
@media only screen and (max-width: 768px) {
.hexaouter {
width: 90%;
}
}
@media only screen and (max-width: 480px) {
.hexaouter {
width: 70%;
min-height: 615px;
height: 615px;
left: 30%;
}
.hex.btmmove {
top: 410px;
}
.hex.btmmove.center {
left: 0px;
top: 205px;
}
.hex.btmmove.center:hover {
left: 60px !important;
top: 206px !important;
}
.hex:hover {
left: 60px;
top: 0;
}
.hex.btmmove:hover {
top: 411px;
left: 60px !important;
}
}
.service-btn{
position: absolute;
top: 40px;
right: 40px;
z-index: 1;
}
.service-btn a{
background-color: var(--accent-color);
height: 60px;
width: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.4s ease-in-out;
}
.service-btn a:hover{
background-color: var(--primary-color);
}
.service-btn a img{
max-width: 20px;
transform: rotate(-45deg);
transition: all 0.4s ease-in-out;
}
.service-btn a:hover img{
transform: rotate(0)
}
.service-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
transition: all 0.4s ease-in-out;
text-align: center;
width: 80%;
}
.service-content h3{
font-size: 20px;
text-transform: capitalize;
color: var(--white-color);
margin-bottom: 10px;
}
.service-content h3 a{
color: inherit;
}
.service-content p{
color: var(--white-color);
margin-bottom: 0;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease-in-out;
}
.all-services-btn{
text-align: center;
margin-top: 20px;
}
/************************************/
/*** 08. Intro Video css ***/
/************************************/
.intro-video .container-fluid{
padding: 0;
}
.intro-video-box{
position: relative;
overflow: hidden;
z-index: 1;
}
.intro-video-image a{
display: block;
cursor: none;
}
.intro-video-image figure::before{
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.6) 80.94%);
height: 100%;
width: 100%;
z-index: 1;
}
.intro-video-image img{
width: 100%;
aspect-ratio: 1 / 0.41;
object-fit: cover;
}
.video-play-button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.video-play-button a{
position: relative;
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
color: var(--white-color);
border: 1px solid var(--white-color);
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
cursor: none;
transition: all 0.3s ease-in-out;
}
.video-play-button a:hover{
border-color: var(--primary-color);
color: var(--primary-color);
}
/************************************/
/*** 09. Latest Project css ***/
/************************************/
.our-project{
padding: 100px 0 70px;
}
.our-Project-nav{
text-align: center;
margin-bottom: 60px;
}
.our-Project-nav ul{
list-style: none;
text-align: center;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 15px 30px;
padding: 0;
margin: 0;
}
.our-Project-nav ul li a{
position: relative;
display: inline-block;
color: var(--primary-color);
font-weight: 500;
line-height: 1.2em;
text-transform: capitalize;
transition: all 0.3s ease-in-out;
}
.our-Project-nav ul li a:after,
.our-Project-nav ul li a:before{
content: '';
position: absolute;
left: 0px;
bottom: -8px;
width: 100%;
height: 2px;
background-color: var(--accent-color);
transform-origin: bottom right;
transition: transform 0.4s ease-in-out;
transform: scaleX(0);
}
.our-Project-nav ul li a:after{
top: -8px;
bottom: auto;
left: 0px;
}
.our-Project-nav ul li a:hover:before,
.our-Project-nav ul li a.active-btn:before,
.our-Project-nav ul li a:hover:after,
.our-Project-nav ul li a.active-btn:after{
transform-origin: bottom left;
transform: scaleX(1);
}
.project-item{
position: relative;
height: calc(100% - 30px);
margin-bottom: 30px;
}
.project-featured-image figure::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 111.33%);
z-index: 0;
}
.project-btn{
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
visibility: hidden;
backdrop-filter: blur(20px);
border-radius: 50%;
transform: translate(-50%, -30%);
transition: all 0.3s ease-in-out;
z-index: 1;
}
.project-item:hover .project-btn{
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%);
}
.project-btn a{
width: 100px;
height: 100px;
background: var(--dark-divider-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease-in-out;
}
.project-btn img{
max-width: 24px;
transform: rotate(-45deg);
transition: all 0.4s ease-in-out;
}
.project-btn a:hover{
background: var(--primary-color);
}
.project-btn a:hover img{
transform: rotate(0deg);
}
.project-featured-image img{
width: 100%;
aspect-ratio: 1 / 0.79;
object-fit: cover;
}
.project-content{
position: absolute;
left: 40px;
bottom: 40px;
right: 40px;
}
.project-content h3,
.project-content h2{
color: var(--white-color);
text-transform: capitalize;
position: relative;
z-index: 1;
}
.project-content h3{
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
}
.project-content h2{
font-size: 20px;
font-weight: 700;
}
.project-content h2 a{
color: inherit;
}
/************************************/
/*** 10. How We Work css ***/
/************************************/
.how-we-work{
background: var(--primary-color);
padding: 50px 0;
}
.how-we-work-list{
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
.how-we-work-item{
width: calc(25% - 15px);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-bottom: 30px;
}
/* Force 4 items in second row for 8 total items */
.how-we-work-item:nth-child(5),
.how-we-work-item:nth-child(6),
.how-we-work-item:nth-child(7),
.how-we-work-item:nth-child(8) {
width: calc(25% - 15px);
}
.how-we-work-item .icon-box{
margin-bottom: 30px;
}
/* Force hexagon background for certificate icons */
.how-we-work-list .how-we-work-item .icon-box{
position: relative;
width: 260px;
height: 260px;
background: transparent;
perspective: 1000px;
transform-style: preserve-3d;
border-radius: 0 !important;
}
/* Flip effect on hover */
.how-we-work-item:hover .certificate-icon {
transform: translate(-50%, -50%) rotateY(-180deg);
}
.how-we-work-item:hover .how-we-work-content {
transform: translate(-50%, -50%) rotateY(0deg);
}
/* Certificate icon - front face of flip card */
.how-we-work-list .how-we-work-item .icon-box .certificate-icon{
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
transform: translate(-50%, -50%) rotateY(0deg);
background: #ffffff;
-webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform 0.6s ease-in-out;
z-index: 1;
}
.how-we-work-list .how-we-work-item .icon-box .certificate-icon img{
max-width: 60%;
max-height: 60%;
border-radius: 0 !important;
object-fit: contain;
-webkit-clip-path: none !important;
clip-path: none !important;
}
.how-we-work-item .icon-box img{
max-width: 60px;
}
/* Advanced Products Showcase Styles */
.product-filters {
margin-bottom: 50px;
margin-top: 40px;
opacity: 0;
animation: slideInFromTop 0.8s ease forwards;
animation-delay: 0.2s;
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.filter-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 15px;
padding: 12px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
.filter-btn {
padding: 14px 28px;
border: none;
background: transparent;
color: var(--secondary-color);
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.2px;
border-radius: 30px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.filter-btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
transition: left 0.4s ease;
z-index: -1;
}
.filter-btn:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
.filter-btn:hover:before,
.filter-btn.active:before {
left: 0;
}
.filter-btn:hover:after {
width: 120px;
height: 120px;
}
.filter-btn:hover,
.filter-btn.active {
color: white;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.filter-btn:active {
transform: translateY(-1px) scale(1.02);
}
.advanced-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-bottom: 80px;
perspective: 1000px;
}
.product-card {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 24px;
overflow: hidden;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.08),
0 5px 15px rgba(0, 0, 0, 0.04);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
opacity: 0;
transform: translateY(50px) scale(0.9);
animation: cardSlideIn 0.8s ease forwards;
border: 1px solid rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
}
/* Staggered animation delays for cards */
.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }
.product-card:nth-child(7) { animation-delay: 0.7s; }
.product-card:nth-child(8) { animation-delay: 0.8s; }
.product-card:nth-child(9) { animation-delay: 0.9s; }
.product-card:nth-child(10) { animation-delay: 1.0s; }
.product-card:nth-child(11) { animation-delay: 1.1s; }
.product-card:nth-child(12) { animation-delay: 1.2s; }
@keyframes cardSlideIn {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Floating shine effect */
.product-card:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent);
transition: left 0.8s ease;
z-index: 2;
pointer-events: none;
}
.product-card.hidden {
display: none !important;
}
.product-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 10px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border: 1px solid rgba(135, 206, 235, 0.3);
}
.product-card:hover:before {
left: 100%;
}
.product-image {
position: relative;
height: 200px;
overflow: hidden;
border-radius: 24px 24px 0 0;
}
.product-image:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.1) 100%);
z-index: 1;
transition: opacity 0.3s ease;
}
.product-card:hover .product-image:before {
opacity: 0;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: saturate(0.9) brightness(1.05);
}
.product-card:hover .product-image img {
transform: scale(1.15) rotate(2deg);
filter: saturate(1.2) brightness(1.1);
}
.product-badge {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, var(--accent-color), #ff6b6b);
color: var(--white-color);
padding: 8px 16px;
border-radius: 25px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
z-index: 3;
box-shadow: 0 4px 15px rgba(233, 79, 55, 0.3);
transition: all 0.4s ease;
transform: translateY(0) scale(1);
}
.product-badge:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
border-radius: 25px;
transition: opacity 0.3s ease;
}
.product-card:hover .product-badge {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 25px rgba(233, 79, 55, 0.4);
}
.product-content {
padding: 30px;
position: relative;
z-index: 2;
}
.product-content h3 {
font-size: 22px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 15px;
line-height: 1.3;
transition: all 0.4s ease;
position: relative;
top: -100px;
}
.product-content h3:after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-color), #87CEEB);
border-radius: 2px;
transition: width 0.5s ease;
}
.product-card:hover .product-content h3 {
color: var(--accent-color);
transform: translateX(8px);
}
.product-card:hover .product-content h3:after {
width: 100%;
}
.product-content p {
color: var(--secondary-color);
font-size: 15px;
line-height: 1.7;
margin-bottom: 25px;
transition: all 0.4s ease;
transform: translateY(0);
opacity: 0.9;
}
.product-card:hover .product-content p {
color: #444;
transform: translateY(-2px);
opacity: 1;
}
.product-specs {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 25px;
}
.spec-item {
background: var(--divider-color);
color: var(--primary-color);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.spec-btn {
width: 100%;
padding: 12px 20px;
background: var(--primary-color);
color: var(--white-color);
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.spec-btn:hover {
background: var(--accent-color);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(233, 79, 55, 0.3);
}
.spec-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.spec-btn:hover::before {
left: 100%;
}
/* Quality Assurance Section Styles */
.quality-assurance {
position: relative;
}
.quality-assurance h3 {
color: var(--primary-color);
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
position: relative;
}
.quality-assurance h3:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: var(--accent-color);
border-radius: 2px;
}
.standards-grid {
display: flex;
flex-direction: column;
gap: 25px;
}
.standards-grid-full {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.standard-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.standard-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.standard-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.standard-icon i {
font-size: 20px;
color: white;
}
.standard-content h4 {
color: var(--primary-color);
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.standard-content p {
color: var(--secondary-color);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.cert-highlights {
display: flex;
flex-direction: column;
gap: 20px;
}
.cert-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border-left: 4px solid var(--accent-color);
}
.cert-item:hover {
transform: translateX(5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.cert-badge {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--accent-color), #ff6b6b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cert-badge i {
font-size: 24px;
color: white;
}
.cert-details h4 {
color: var(--primary-color);
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
}
.cert-details p {
color: var(--secondary-color);
font-size: 13px;
margin: 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-card {
background: white;
padding: 30px 25px;
border-radius: 20px;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border-top: 4px solid var(--accent-color);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
}
.feature-icon i {
font-size: 28px;
color: white;
}
.feature-card h4 {
color: var(--primary-color);
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
}
.feature-card p {
color: var(--secondary-color);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* Quality Assurance Responsive Design */
@media (max-width: 992px) {
.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.standard-item, .cert-item {
flex-direction: column;
text-align: center;
gap: 15px;
}
}
@media (max-width: 768px) {
.product-filters {
margin-top: 30px;
margin-bottom: 40px;
}
.quality-assurance {
padding: 60px 0 !important;
}
.feature-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.standards-grid, .cert-highlights {
gap: 15px;
}
.standard-item, .cert-item {
padding: 15px;
}
.feature-card {
padding: 25px 20px;
}
}
/* Enhanced Responsive Design for Product Cards */
@media (max-width: 768px) {
.advanced-products-grid {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 60px;
}
.product-card {
margin: 0 15px;
}
.product-card:hover {
transform: translateY(-10px) scale(1.02);
}
.filter-tabs {
padding: 8px;
gap: 10px;
}
.filter-btn {
padding: 12px 20px;
font-size: 12px;
}
.product-content {
padding: 25px 20px;
}
.product-content h3 {
font-size: 20px;
}
.spec-btn {
padding: 14px 20px;
}
}
@media (max-width: 480px) {
.product-image {
height: 180px;
}
.product-content {
padding: 20px 15px;
}
.product-content h3 {
font-size: 18px;
}
.spec-item {
padding: 6px 12px;
font-size: 11px;
}
}
/* Production Capabilities */
.production-capabilities {
background: var(--divider-color);
padding: 50px 0;
border-radius: 15px;
margin: 60px 0;
}
.capability-item {
text-align: center;
padding: 30px 20px;
}
.capability-icon {
width: 70px;
height: 70px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
}
.capability-icon i {
font-size: 28px;
color: var(--white-color);
}
.capability-item:hover .capability-icon {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 10px 25px rgba(233, 79, 55, 0.3);
}
.capability-content h4 {
font-size: 22px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 8px;
}
.capability-content p {
font-size: 14px;
color: var(--secondary-color);
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Responsive Design */
@media (max-width: 768px) {
.filter-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 10px;
margin: 0 15px;
border-radius: 25px;
}
.filter-btn {
padding: 10px 16px;
font-size: 12px;
letter-spacing: 0.8px;
min-width: auto;
flex: 1;
max-width: 150px;
text-align: center;
white-space: nowrap;
}
.advanced-products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.production-capabilities .row {
flex-direction: column;
}
.capability-item {
margin-bottom: 30px;
}
}
@media (max-width: 480px) {
.filter-tabs {
margin: 0 10px;
padding: 8px;
gap: 6px;
}
.filter-btn {
padding: 8px 12px;
font-size: 11px;
letter-spacing: 0.5px;
max-width: 120px;
border-radius: 20px;
}
.product-content {
padding: 20px;
}
.product-content h3 {
font-size: 18px;
}
.capability-icon {
width: 60px;
height: 60px;
}
.capability-icon i {
font-size: 24px;
}
}
/* Flip card structure for certifications - back face */
.how-we-work-content {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
transform: translate(-50%, -50%) rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 28px;
box-sizing: border-box;
background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
-webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
transition: transform 0.6s ease-in-out;
z-index: 2;
}
.how-we-work-content h3{
font-size: 16px;
text-transform: capitalize;
color: var(--white-color);
margin-bottom: 10px;
font-weight: 600;
line-height: 1.1;
}
.how-we-work-content p{
color: var(--white-color);
margin: 0;
font-size: 12px;
line-height: 1.3;
}
/* Client Logo Grid Styles */
.clients-logo-grid {
margin-top: 40px;
}
.client-logo-item {
text-align: center;
padding: 30px 20px;
margin-bottom: 30px;
transition: all 0.3s ease;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
}
.client-logo-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.client-logo {
margin-bottom: 15px;
}
.client-logo img {
max-width: 120px;
max-height: 60px;
object-fit: contain;
filter: grayscale(100%);
transition: all 0.3s ease;
}
.client-logo-item:hover .client-logo img {
filter: grayscale(0%);
transform: scale(1.1);
}
.client-name h4 {
color: #333333;
font-size: 16px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.how-work-company-slider{
border-top: 1px solid var(--dark-divider-color);
margin-top: 60px;
padding-top: 60px;
}
.how-work-company-slider .company-logo{
text-align: center;
}
.how-work-company-slider .company-logo img{
width: 100%;
max-height: 70px;
}
/************************************/
/*** 11. Our Skills css ***/
/************************************/
.our-skill{
padding: 100px 0;
background: url('../images/section-bg-shape-2.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.skills-progress-bar{
margin-bottom: 40px;
}
.skills-progress-bar:last-child{
margin-bottom: 0;
}
.skillbar .skill-data{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.skill-data .skill-title{
font-size: 16px;
text-transform: capitalize;
color: var(--primary-color);
}
.skill-data .skill-no{
font-size: 16px;
color: var(--primary-color);
margin-left: 20px;
}
.skill-progress{
width: 100%;
height: 12px;
background: var(--divider-color);
border-radius: 99px;
position: relative;
}
.skill-progress .count-bar{
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--primary-color);
border-radius: 99px;
}
.our-skill-image{
position: relative;
padding-bottom: 155px;
margin-left: 65px;
}
.our-skill-img-1{
width: 333px;
position: relative;
background: url('../images/our-skill-img-bg-dot.svg');
background-repeat: no-repeat;
background-position: top left;
background-size: 84px auto;
padding: 30px 0 0 30px;
}
.our-skill-img-1 figure,
.our-skill-img-2 figure,
.our-skill-img-3 figure{
display: block;
}
.our-skill-img-1 img{
width: 100%;
aspect-ratio: 1/1.37;
object-fit: cover;
}
.our-skill-img-2{
width: 202px;
position: absolute;
top: 70px;
right: 0;
}
.our-skill-img-2 img{
width: 100%;
aspect-ratio: 1/0.93;
object-fit: cover;
}
.our-skill-img-3{
width: 333px;
position: absolute;
bottom: 0;
right: 0;
}
.our-skill-img-3 img{
width: 100%;
aspect-ratio: 1/0.97;
object-fit: cover;
}
/************************************/
/*** 12. Our Testimonials css ***/
/************************************/
.our-testimonials{
background: var(--secondery-color);
}
.our-testimonials .container-fluid{
padding: 0;
}
.our-testimonials-image{
height: 100%;
}
.our-testimonials-image figure,
.our-testimonials-image figure img{
width: 100%;
height: 100%;
aspect-ratio: 1 / 0.82;
object-fit: cover;
}
.our-testimonial-content{
padding: 100px;
}
.our-testimonial-content .section-title{
background: url('../images/testimonial-quote.svg') no-repeat;
background-position: top right;
background-size: 162px auto;
}
.testimonial-slider{
width: 100%;
max-width: 620px;
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--divider-color);
}
.testimonial-slider .swiper-wrapper{
cursor: none;
}
.testimonial-rating{
margin-bottom: 20px;
}
.testimonial-rating i{
font-size: 18px;
color: var(--primary-color);
margin-right: 2px;
}
.testimonial-rating i:last-child{
margin-right: 0;
}
.testimonial-content{
margin-bottom: 40px;
}
.testimonial-content p{
font-size: 20px;
color: var(--primary-color);
margin: 0;
}
.testimonial-body{
display: flex;
align-items: center;
}
.testimonial-body .author-image{
margin-right: 15px;
}
.testimonial-body .author-image img{
width: 60px;
height: 60px;
border-radius: 50%;
}
.testimonial-body .author-content{
width: calc(100% - 75px);
}
.testimonial-body .author-content h3{
font-size: 20px;
text-transform: capitalize;
}
.testimonial-body .author-content p{
text-transform: capitalize;
margin: 0;
}
.testimonial-rating-counter{
display: flex;
align-items: center;
gap: 20px;
}
.testimonial-rating-counter .rating-counter h2{
font-size: 58px;
}
.testimonial-client-rating{
display: inline-block;
background: var(--accent-color);
padding: 0px 5px 3px 5px;
line-height: 1em;
}
.testimonial-client-rating i{
font-size: 10px;
color: var(--white-color);
}
.testimonial-rating-content p{
color: var(--primary-color);
font-weight: 500;
margin: 0;
}
/************************************/
/*** 13. Our Blog css ***/
/************************************/
.our-blog{
padding: 100px 0;
background: url('../images/section-bg-shape-2.svg');
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
}
.post-item{
height: calc(100% - 30px);
margin-bottom: 30px;
}
.post-featured-image{
margin-bottom: 20px;
}
.post-featured-image a{
cursor: none;
}
.post-featured-image figure,
.post-featured-image a{
display: block;
}
.post-featured-image img{
width: 100%;
aspect-ratio: 1 / 0.85;
object-fit: cover;
transition: all 0.4s ease-in-out;
}
.post-item:hover .post-featured-image img{
transform: scale(1.1);
}
.post-item-content{
margin-bottom: 15px;
}
.post-item-content h3{
color: var(--primary-color);
font-size: 20px;
line-height: 1.4em;
}
.post-item-content h3 a{
color: inherit;
}
.post-item-btn a{
position: relative;
color: var(--primary-color);
font-weight: 500;
text-transform: capitalize;
padding-right: 25px;
}
.post-item-btn a::after{
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translate(0px , -50%);
width: 17px;
height: 16px;
background: url('../images/arrow-dark.svg') no-repeat;
background-position: right center;
background-size: cover;
transition: all 0.4s ease-in-out;
}
.post-item-btn a:hover::after{
transform: translate(2px , -50%);
}
.our-blog-footer{
margin-top: 20px;
text-align: center;
}
/************************************/
/*** 14. Footer css ***/
/************************************/
.main-footer{
padding: 80px 0 0;
background: var(--primary-color);
background-size: contain;
background-image: image-set(
url('/images/footer-bg.webp') type('image/webp') 1x,
url('/images/footer-bg.png') type('image/png') 1x
);
position: relative;
}
/* Enhanced footer overlay for better text readability */
.main-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.85) 100%);
z-index: 1;
}
/* Ensure footer content is above the overlay */
.main-footer > * {
position: relative;
z-index: 2;
}
.main-footer .footer-header{
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 40px;
padding-bottom: 40px;
}
.footer-social-links{
display: flex;
align-items: center;
justify-content: end;
gap: 30px;
}
.footer-social-link-title h3{
font-size: 20px;
text-transform: capitalize;
color: var(--white-color);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
font-weight: 600;
}
.footer-social-links ul{
list-style: none;
margin: 0;
padding: 0;
}
.footer-social-links ul li{
display: inline-flex;
margin-right: 10px;
}
.footer-social-links ul li:last-child{
margin-right: 0;
}
.footer-social-links ul li a{
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
height: 36px;
width: 36px;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.footer-social-links ul li a i{
font-size: 18px;
color: var(--white-color);
transition: all 0.3s ease-in-out;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.footer-social-links ul li a:hover{
background: var(--accent-color);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.footer-social-links ul li a:hover i{
color: var(--white-color);
}
.footer-links h3{
font-size: 20px;
text-transform: capitalize;
color: var(--white-color);
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
font-weight: 600;
position: relative;
}
.footer-links h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 2px;
background: var(--accent-color);
border-radius: 1px;
}
.footer-links ul{
list-style: none;
margin: 0;
padding: 0;
}
.footer-links ul li{
color: rgba(255, 255, 255, 0.9);
text-transform: capitalize;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.footer-links ul li:last-child{
margin-bottom: 0;
}
.footer-links ul li:hover{
color: var(--accent-color);
transform: translateX(5px);
}
.footer-links ul li a{
display: block;
color: inherit;
}
.footer-contact-item{
display: flex;
align-items: center;
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 8px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease-in-out;
}
.footer-contact-item:last-child{
margin-bottom: 0;
}
.footer-contact-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.footer-contact-item .icon-box{
display: flex;
justify-content: center;
align-items: center;
background: var(--accent-color);
border-radius: 50%;
height: 40px;
width: 40px;
margin-right: 15px;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.footer-contact-item:hover .icon-box{
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.footer-contact-item .icon-box i{
font-size: 18px;
color: var(--white-color);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.footer-contact-content{
flex: 1;
}
.footer-contact-content p{
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin: 0;
font-weight: 500;
}
.footer-newsletter-form p{
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
line-height: 1.6;
}
.footer-newsletter-form .form-group{
position: relative;
margin-bottom: 0;
}
.footer-newsletter-form .form-group .form-control{
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
padding: 12px 50px 12px 20px;
color: var(--white-color);
backdrop-filter: blur(10px);
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.footer-newsletter-form .form-group .form-control:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--accent-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
outline: none;
}
.footer-newsletter-form .form-group .form-control::placeholder{
color: rgba(255, 255, 255, 0.7);
}
.footer-newsletter-form button{
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: var(--accent-color);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.footer-newsletter-form button:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.footer-newsletter-form button i{
font-size: 16px;
color: var(--white-color);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.footer-newsletter-form button:hover i{
transform: translateX(2px);
}
.footer-copyright{
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 40px;
padding: 20px 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.footer-copyright-text p{
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin: 0;
text-align: center;
font-size: 14px;
}
/* Enhanced footer logo */
.footer-logo img {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: all 0.3s ease-in-out;
}
.footer-logo:hover img {
transform: scale(1.05);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
/* Responsive enhancements */
@media (max-width: 768px) {
.main-footer {
padding: 60px 0 0;
}
.footer-social-links {
justify-content: center;
margin-top: 20px;
}
.footer-contact-item {
padding: 12px;
}
.footer-contact-item .icon-box {
height: 35px;
width: 35px;
margin-right: 12px;
}
.footer-contact-item .icon-box i {
font-size: 16px;
}
}
@media (max-width: 480px) {
.main-footer {
padding: 40px 0 0;
}
.footer-links h3 {
font-size: 18px;
}
.footer-contact-item {
padding: 10px;
}
.footer-contact-item .icon-box {
height: 30px;
width: 30px;
margin-right: 10px;
}
.footer-contact-item .icon-box i {
font-size: 14px;
}
}
.footer-contact-content p{
color: var(--white-color);
margin: 0;
}
.footer-newsletter-form p{
color: var(--white-color);
margin-bottom: 30px;
}
.footer-newsletter-form .form-group{
display: flex;
background: var(--white-color);
overflow: hidden;
}
.footer-newsletter-form .form-group .form-control{
width: 85%;
border: none;
border-radius: 0;
color: var(--text-color);
background: transparent;
padding: 13px 10px;
box-shadow: none;
}
.footer-newsletter-form .form-group .form-control::placeholder{
color: var(--text-color);
}
.footer-newsletter-form button{
background-color: transparent;
width: 15%;
border: none;
padding: 0;
}
.footer-newsletter-form button i{
color: var(--accent-color);
font-size: 16px;
transition: all 0.3s ease-in-out;
}
.footer-newsletter-form button:hover i{
color: var(--primary-color);
}
.footer-copyright{
border-top: 1px solid var(--dark-divider-color);
text-align: center;
margin-top: 65px;
padding: 40px 0;
}
.footer-copyright-text p{
color: var(--white-color);
margin: 0;
}
/************************************/
/*** 15. About Us Page css ***/
/************************************/
.page-header{
position: relative;
background-image: image-set(
url('../images/page-header-bg.webp') type('image/webp') 1x,
url('../images/page-header-bg.png') type('image/png') 1x
);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 270px 0 180px;
margin-top: -118px;
}
.page-header::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, rgba(25, 35, 36, 0) 0%, rgba(25, 35, 36, 0.4) 80.94%);
width: 100%;
height: 100%;
z-index: 0;
}
.page-header-box{
position: relative;
text-align: center;
z-index: 1;
}
.page-header-box h1{
display: inline-block;
font-size: 80px;
font-weight: 700;
color: var(--white-color);
letter-spacing: -0.02em;
margin-bottom: 10px;
cursor: none;
}
.page-header-box ol{
margin: 0;
padding: 0;
justify-content: center;
}
.page-header-box ol li.breadcrumb-item{
font-size: 22px;
text-transform: capitalize;
color: var(--white-color);
}
.page-header-box ol li.breadcrumb-item a{
color: inherit;
}
.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
font-size: 20px;
color: var(--white-color);
}
.about-us.page-about-us{
background: transparent;
}
.about-facility-list{
margin-top: 100px;
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.about-facility-item{
width: calc(33.33% - 20px);
display: flex;
}
.about-facility-item .icon-box{
position: relative;
height: 60px;
width: 60px;
background-color: var(--divider-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.about-facility-item .icon-box:before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
background: var(--primary-color);
border-radius: 50%;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}
.about-facility-item:hover .icon-box:before{
transform: scale(1);
}
.about-facility-item .icon-box img{
max-width: 24px;
z-index: 1;
transition: all 0.4s ease-in-out;
}
.about-facility-item:hover .icon-box img{
filter: brightness(0) invert(1);
}
.about-facility-content{
width: calc(100% - 80px);
}
.about-facility-content h3{
font-size: 20px;
text-transform: capitalize;
margin-bottom: 10px;
}
.about-facility-content p{
margin-bottom: 0;
}
.vision-mission{
padding: 100px 0 50px;
background: linear-gradient(180deg, var(--primary-color) 60%, var(--white-color) 40%);
}
.vision-mission-box{
background-color: var(--secondery-color);
padding: 45px 60px;
display: flex;
flex-wrap: wrap;
gap: 30px 150px;
}
.vision-mission-item{
position: relative;
width: calc(50% - 75px);
}
.vision-mission-item::before{
content: '';
position: absolute;
height: 100%;
width: 1px;
top: 0;
right: -75px;
bottom: 0;
background-color: var(--divider-color);
z-index: 1;
}
.vision-mission-item:nth-child(2n + 2)::before,
.vision-mission-item:last-child::before{
display: none;
}
.vision-mission-item .icon-box{
position: relative;
width: 95px;
height: 95px;
background: var(--divider-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.vision-mission-item .icon-box:before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
background: var(--primary-color);
border-radius: 50%;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}
.vision-mission-item:hover .icon-box:before{
transform: scale(1);
}
.vision-mission-item .icon-box img{
position: relative;
max-width: 36px;
z-index: 1;
transition: all 0.4s ease-in-out;
}
.vision-mission-item:hover .icon-box img{
filter: brightness(0) invert(1);
}
.vision-mission-content h3{
font-size: 20px;
text-transform: capitalize;
margin-bottom: 20px;
}
.vision-mission-content p{
margin: 0;
}
.best-selling{
background: url(../images/section-bg-shape-1.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
padding: 50px 0 100px;
}
.best-selling-content-img{
margin-bottom: 80px;
}
.best-selling-iamge figure,
.best-selling-content-img figure{
display: block;
}
.best-selling-content-img img{
width: 100%;
aspect-ratio: 1 / 0.42;
object-fit: cover;
}
.best-selling-content .section-title{
margin-bottom: 0;
}
.best-selling-iamge img{
width: 100%;
aspect-ratio: 1 / 0.93;
object-fit: cover;
}
.our-team{
padding: 100px 0 70px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.our-team::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.team-member-item{
height: 100%;
margin-bottom: 40px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.team-member-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #233F88, #4A90E2, #233F88);
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { background-position: 200% 0; }
50% { background-position: -200% 0; }
}
.team-member-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 25px 60px rgba(35, 63, 136, 0.15);
border-color: rgba(35, 63, 136, 0.2);
}
.team-image{
position: relative;
margin-bottom: 30px;
overflow: hidden;
padding: 30px 30px 20px;
display: flex;
justify-content: center;
align-items: center;
}
.team-image .team-icon-box {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 50%;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow: hidden;
}
.team-image .team-icon-box::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #233F88, #4A90E2, #233F88);
border-radius: 50%;
z-index: -1;
animation: rotate 4s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.team-image .team-icon-box i {
font-size: 50px !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
color: #233F88 !important;
}
.team-member-item:hover .team-image .team-icon-box {
transform: scale(1.05);
box-shadow: 0 20px 45px rgba(35, 63, 136, 0.2);
}
.team-member-item:hover .team-image .team-icon-box i {
transform: translate(-50%, -50%) scale(1.1) rotateY(180deg);
color: #4A90E2 !important;
}
.team-image a{
display: block;
cursor: none;
}
.team-image figure{
display: block;
}
.team-image figure img{
width: 100%;
aspect-ratio: 1 / 1.11;
object-fit: cover;
transition: all 0.4s ease-in-out;
}
.team-member-item:hover .team-image figure img{
transform: scale(1.1);
}
.team-readmore-btn{
position: absolute;
top: 30px;
right: 30px;
z-index: 1;
}
.team-readmore-btn a{
width: 60px;
height: 60px;
background-color: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.team-readmore-btn a:hover{
background-color: var(--primary-color);
}
.team-readmore-btn img{
max-width: 20px;
transform: rotate(-45deg);
transition: all 0.4s ease-in-out;
}
.team-readmore-btn a:hover img{
transform: rotate(0deg);
}
.team-body {
padding: 0 30px 30px;
position: relative;
}
.team-content{
text-align: center;
margin-bottom: 25px;
position: relative;
}
.team-content h3{
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 8px;
color: #233F88;
transition: all 0.3s ease;
position: relative;
}
.team-content h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, #233F88, #4A90E2);
transition: width 0.3s ease;
}
.team-member-item:hover .team-content h3::after {
width: 60px;
}
.team-content p{
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
color: #666;
margin: 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 8px 16px;
border-radius: 20px;
display: inline-block;
transition: all 0.3s ease;
}
.team-social-list {
opacity: 0;
transform: translateY(20px);
transition: all 0.4s ease;
}
.team-member-item:hover .team-social-list {
opacity: 1;
transform: translateY(0);
}
.team-social-icon ul{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
display: flex;
justify-content: center;
gap: 12px;
}
.team-social-icon ul li{
display: inline-flex;
margin: 0;
}
.team-social-icon ul li a{
width: 45px;
height: 45px;
background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(35, 63, 136, 0.3);
}
.team-social-icon ul li a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.team-social-icon ul li a:hover::before {
left: 100%;
}
.team-social-icon ul li a:hover{
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(35, 63, 136, 0.4);
}
.team-social-icon ul li:nth-child(1) a {
background: linear-gradient(135deg, #E4405F 0%, #F77737 100%);
box-shadow: 0 4px 15px rgba(228, 64, 95, 0.3);
}
.team-social-icon ul li:nth-child(2) a {
background: linear-gradient(135deg, #1DA1F2 0%, #0084B4 100%);
box-shadow: 0 4px 15px rgba(29, 161, 242, 0.3);
}
.team-social-icon ul li:nth-child(3) a {
background: linear-gradient(135deg, #4267B2 0%, #898CDF 100%);
box-shadow: 0 4px 15px rgba(66, 103, 178, 0.3);
}
.team-social-icon ul li a i{
color: inherit;
font-size: 18px;
transition: transform 0.3s ease;
}
.team-social-icon ul li a:hover i{
transform: scale(1.2) rotate(10deg);
}
.our-faqs{
padding: 100px 0;
}
.our-faqs-content{
margin-right: 70px;
}
.faq-accordion .accordion-item{
border-bottom: 1px solid var(--divider-color);
margin-bottom: 30px;
padding-bottom: 15px;
}
.faq-accordion .accordion-item:last-child{
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.faq-accordion .accordion-header .accordion-button{
font-size: 20px;
font-weight: 600;
line-height: 1.2em;
color: var(--primary-color);
align-items: start;
padding-right: 35px;
transition: all 0.3s ease-in-out;
}
.faq-accordion .accordion-header .accordion-button span{
margin-right: 7px;
}
.faq-accordion .accordion-button:not(.collapsed){
padding-bottom: 15px;
}
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
content: '\2b';
font-family: 'Font Awesome 6 Free';
position: absolute;
font-size: 18px;
font-weight: 900;
color: var(--primary-color);
text-align: right;
top: 0;
right: 0;
transition: all 0.3s ease-in-out;
}
.faq-accordion .accordion-button:not(.collapsed)::after{
content: '\f068';
}
.faq-accordion .accordion-body{
padding-right: 35px;
}
.faq-accordion .accordion-body p{
margin: 0;
}
.our-faqs-image{
text-align: right;
}
.our-faqs-image figure{
display: block;
}
.our-faqs-image img{
width: 100%;
aspect-ratio: 1 / 1.26;
object-fit: cover;
}
.our-clients{
background-color: var(--secondery-color);
padding: 100px 0;
}
.our-clients .our-clients-box{
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.our-client-slider .client-logo{
text-align: center;
}
.our-client-slider .client-logo img{
width: 100%;
max-height: 40px;
}
/************************************/
/*** 16. Services Page css ***/
/************************************/
.page-services{
padding: 100px 0 70px;
}
/************************************/
/*** 17. Service Single css ***/
/************************************/
.page-service-single{
padding: 100px 0;
}
.service-sidebar{
position: sticky;
top: 30px;
margin-right: 30px;
}
.service-catagery-list{
border: 1px solid var(--divider-color);
padding: 30px;
margin-bottom: 40px;
overflow: hidden;
}
.service-catagery-list h3{
font-size: 20px;
text-transform: capitalize;
border-bottom: 1px solid var(--divider-color);
padding-bottom: 20px;
margin-bottom: 20px;
}
.service-catagery-list ul{
list-style: none;
margin: 0;
padding: 0;
}
.service-catagery-list ul li{
margin-bottom: 20px;
}
.service-catagery-list ul li:last-child{
margin: 0;
}
.service-catagery-list ul li a{
position: relative;
display: block;
font-weight: 500;
text-transform: capitalize;
color: var(--accent-color);
padding-right: 25px;
transition: all 0.3s ease-in-out;
}
.service-catagery-list ul li:hover a{
color: var(--primary-color);
}
.service-catagery-list ul li a::before{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 18px;
height: 18px;
transform: translateY(-50%) rotate(-45deg);
background-image: url(../images/arrow-accent.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: all 0.3s ease-in-out;
}
.service-catagery-list ul li:hover a::before{
transform: translateY(-50%) rotate(0);
filter: brightness(0) invert(0);
}
.sidebar-cta-image figure{
display: block;
}
.sidebar-cta-image img{
width: 100%;
aspect-ratio: 1 / 0.57;
object-fit: cover;
}
.sidebar-cta-Body{
border: 1px solid var(--divider-color);
padding: 30px;
}
.sidebar-cta-content{
margin-bottom: 25px;
}
.sidebar-cta-content h3{
font-size: 20px;
text-transform: capitalize;
margin-bottom: 10px;
}
.sidebar-cta-content p{
font-weight: 500;
margin-bottom: 0;
}
.sidebar-cta-contact-item{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.sidebar-cta-contact-item:last-child{
margin-bottom: 0;
}
.sidebar-cta-contact-item .icon-box{
position: relative;
height: 58px;
width: 58px;
background-color: var(--divider-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
transition: all 0.4s ease-in-out;
}
.sidebar-cta-contact-item:hover{
background-color: transparent;
}
.sidebar-cta-contact-item .icon-box::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--primary-color);
border-radius: 50%;
height: 100%;
width: 100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
}
.sidebar-cta-contact-item:hover .icon-box::before{
transform: scale(1);
}
.sidebar-cta-contact-item .icon-box img{
position: relative;
max-width: 24px;
transition: all 0.3s ease-in-out;
z-index: 1;
}
.sidebar-cta-contact-item:hover .icon-box img{
filter: brightness(0) invert(1);
}
.cta-contact-item-content{
width: calc(100% - 78px);
}
.cta-contact-item-content p{
font-weight: 500;
margin: 0;
}
.service-feature-image{
margin-bottom: 40px;
}
.service-feature-image figure{
display: block;
}
.service-feature-image img{
width: 100%;
aspect-ratio: 1 / 0.55;
object-fit: cover;
}
.service-entry{
margin-bottom: 60px;
}
.service-entry h2{
font-size: 46px;
margin-bottom: 20px;
}
.service-entry h2 span{
color: var(--accent-color);
}
.service-entry p{
margin-bottom: 20px;
}
.service-entry p:last-child{
margin-bottom: 0;
}
.service-entry ul{
list-style: none;
margin-bottom: 20px;
padding: 0;
}
.service-entry ul li{
position: relative;
font-weight: 500;
color: var(--text-color);
text-transform: capitalize;
padding-left: 30px;
margin-bottom: 15px;
}
.service-entry ul li:last-child{
margin-bottom: 0;
}
.service-entry ul li::before{
content: '\f058';
position: absolute;
font-family: 'FontAwesome';
font-size: 20px;
font-weight: 900;
line-height: normal;
color: var(--accent-color);
display: inline-block;
top: 2px;
left: 0;
}
.service-entry-list-image{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
}
.service-entry-image,
.service-entry-list{
width: calc(50% - 15px);
}
.service-entry-image figure{
display: block;
}
.service-entry-image img{
width: 100%;
aspect-ratio: 1 / 0.615;
object-fit: cover;
}
.service-entry-list ul{
margin-bottom: 0;
}
.why-choose-content.service-single-why-choose{
margin-bottom: 60px;
}
/************************************/
/*** 18. Blog Archive css ***/
/************************************/
.page-blog{
padding: 100px 0;
}
.page-pagination{
margin-top: 20px;
text-align: center;
}
.page-pagination ul{
justify-content: center;
padding: 0;
margin: 0;
}
.page-pagination ul li a,
.page-pagination ul li span{
display: flex;
text-decoration: none;
justify-content: center;
align-items: center;
background: var(--accent-color);
color: var(--white-color);
width: 40px;
height: 40px;
margin: 0 5px;
font-weight: 700;
line-height: 1em;
transition: all 0.3s ease-in-out;
}
.page-pagination ul li.active a,
.page-pagination ul li a:hover{
background: var(--primary-color);
color: var(--white-color);
}
/************************************/
/*** 19. Blog Single css ***/
/************************************/
.page-single-post{
padding: 100px 0;
}
.post-image{
position: relative;
margin-bottom: 30px;
}
.post-image figure{
display: block;
}
.post-image figure,
.post-image img{
aspect-ratio: 1 / 0.50;
object-fit: cover;
}
.post-content{
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.post-entry{
border-bottom: 1px solid var(--divider-color);
padding-bottom: 30px;
margin-bottom: 30px;
}
.post-entry:after{
content: '';
display: block;
clear: both;
}
.post-entry a{
color: var(--accent-color);
}
.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
font-weight: 700;
line-height: 1.2em;
margin: 0 0 0.6em;
}
.post-entry h1{
font-size: 80px;
letter-spacing: -0.02em;
}
.post-entry h2{
font-size: 46px;
letter-spacing: -0.02em;
}
.post-entry h3{
font-size: 46px;
}
.post-entry h4{
font-size: 30px;
}
.post-entry h5{
font-size: 24px;
}
.post-entry h6{
font-size: 18px;
}
.post-entry p{
margin-bottom: 20px;
}
.post-entry p:last-child{
margin-bottom: 0;
}
.post-entry p strong{
color: var(--primary-color);
font-size: 18px;
font-weight: 600;
}
.post-entry ol{
margin: 0 0 30px;
}
.post-entry ol li{
margin-bottom: 20px;
font-size: 18px;
font-weight: 600;
color: var(--text-color);
}
.post-entry ul{
padding: 0;
margin: 20px 0 20px;
padding-left: 20px;
}
.post-entry ul li{
font-size: 18px;
font-weight: 500;
color: var(--text-color);
position: relative;
margin-bottom: 15px;
}
.post-entry ul li:last-child{
margin-bottom: 0;
}
.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
margin-top: 20px;
margin-bottom: 0;
}
.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
margin-bottom: 0;
}
.post-entry blockquote{
background: url(../images/icon-blockquote.svg), var(--accent-color);
background-repeat: no-repeat;
background-position: 35px 30px;
background-size: 58px;
border-radius: 0;
padding: 30px 30px 30px 100px;
margin-bottom: 30px;
}
.post-entry blockquote p{
font-size: 20px;
font-weight: 600;
line-height: 1.4em;
color: var(--white-color);
}
.post-entry blockquote p:last-child{
margin-bottom: 0;
}
.tag-links{
font-size: 20px;
font-weight: 700;
color: var(--primary-color);
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.post-tags .tag-links a{
display: inline-block;
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
background: var(--accent-color);
color: var(--white-color);
border-radius: 0;
padding: 6px 20px;
transition: all 0.3s ease-in-out;
}
.post-tags .tag-links a:hover{
background: var(--primary-color);
}
.post-social-sharing{
text-align: right;
}
.post-social-sharing ul{
list-style: none;
padding: 0;
margin: 0;
}
.post-social-sharing ul li{
display: inline-block;
margin-right: 10px;
}
.post-social-sharing ul li:last-child{
margin-right: 0;
}
.post-social-sharing ul li a{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--accent-color);
color: var(--white-color);
border-radius: 0;
width: 36px;
height: 36px;
transition: all 0.3s ease-in-out;
}
.post-social-sharing ul li:hover a{
background: var(--primary-color);
}
.post-social-sharing ul li a i{
font-size: 18px;
color: inherit;
}
/************************************/
/*** 20. Project Page css ***/
/************************************/
.page-project{
padding: 100px 0 70px;
}
/************************************/
/*** 21. Project Single css ***/
/************************************/
.page-project-single{
padding: 100px 0;
}
.project-single-sidebar{
position: sticky;
top: 30px;
margin-right: 30px;
}
.project-detail-list{
border: 1px solid var(--divider-color);
padding: 30px;
margin-bottom: 60px;
}
.project-detail-item{
display: flex;
align-items: center;
margin-bottom: 30px;
}
.project-detail-item:last-child{
margin-bottom: 0;
}
.project-detail-item .icon-box{
position: relative;
background-color: var(--divider-color);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
transition: all 0.3s ease-in-out;
}
.project-detail-item .icon-box::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--accent-color);
border-radius: 50%;
height: 100%;
width: 100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
}
.project-detail-item:hover .icon-box::before{
transform: scale(1);
}
.project-detail-item .icon-box i{
font-size: 22px;
color: var(--accent-color);
transition: all 0.3s ease-in-out;
z-index: 1;
}
.project-detail-item:hover .icon-box i{
color: var(--white-color);
}
.project-detail-content{
width: calc(100% - 70px);
}
.project-detail-content h3{
font-size: 16px;
font-weight: 500;
text-transform: capitalize;
margin-bottom: 5px;
}
.project-detail-content p{
color: var(--accent-color);
text-transform: capitalize;
margin-bottom: 0;
}
.project-single-image{
margin-bottom: 40px;
}
.project-single-image figure{
display: block;
}
.project-single-image img{
width: 100%;
aspect-ratio: 1 / 0.6;
object-fit: cover;
}
.project-info,
.project-design-info{
margin-bottom: 60px;
}
.project-entry h2{
font-size: 46px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 30px;
}
.project-entry p{
margin-bottom: 20px;
}
.project-entry p:last-child{
margin-bottom: 0;
}
.project-entry ul{
list-style: none;
margin-bottom: 20px;
padding: 0;
}
.project-entry ul li{
position: relative;
font-weight: 500;
color: var(--text-color);
padding-left: 30px;
margin-bottom: 15px;
}
.project-entry ul li:last-child{
margin-bottom: 0;
}
.project-entry ul li::before{
content: '\f058';
position: absolute;
font-family: 'FontAwesome';
font-size: 20px;
font-weight: 900;
line-height: normal;
color: var(--accent-color);
display: inline-block;
top: 2px;
left: 0;
}
.project-gallery-images{
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.project-gallery-img{
width: calc(25% - 22.5px);
}
.project-gallery-img a,
.project-gallery-img figure{
display: block;
cursor: none;
}
.project-gallery-img figure img{
width: 100%;
aspect-ratio: 1 / 0.99;
object-fit: cover;
}
/************************************/
/*** 22. Image Gallery css ***/
/************************************/
.page-gallery{
padding: 100px 0 70px;
}
.page-gallery-box .photo-gallery{
height: calc(100% - 30px);
margin-bottom: 30px;
}
.page-gallery-box .photo-gallery a{
cursor: none;
}
.page-gallery-box .photo-gallery figure{
display: block;
}
.page-gallery-box .photo-gallery img{
width: 100%;
aspect-ratio: 1 / 0.85;
object-fit: cover;
}
/************************************/
/*** 23. FAQs Page css ***/
/************************************/
.page-faqs{
padding: 100px 0;
}
.faq-sidebar{
position: sticky;
top: 30px;
margin-right: 30px;
}
.faq-catagery-list{
border: 1px solid var(--divider-color);
padding: 30px;
margin-bottom: 60px;
}
.faq-catagery-list ul{
list-style: none;
margin: 0;
padding: 0;
}
.faq-catagery-list ul li{
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
}
.faq-catagery-list ul li:last-child{
margin-bottom: 0;
}
.faq-catagery-list ul li a{
position: relative;
display: block;
font-weight: 500;
text-transform: capitalize;
color: var(--accent-color);
padding-right: 25px;
transition: all 0.3s ease-in-out;
}
.faq-catagery-list ul li:hover a{
color: var(--primary-color);
}
.faq-catagery-list ul li a::before{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 18px;
height: 18px;
transform: translateY(-50%) rotate(-45deg);
background-image: url(../images/arrow-accent.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: all 0.3s ease-in-out;
}
.faq-catagery-list ul li:hover a::before{
transform: translateY(-50%) rotate(0);
filter: brightness(0) invert(0);
}
.our-faq-section.page-faq-accordion{
margin-bottom: 60px;
}
.our-faq-section.page-faq-accordion:last-child{
margin-bottom: 0;
}
/************************************/
/*** 24. Contact Us Page css ***/
/************************************/
.page-contact-us{
padding: 100px 0 50px;
}
.contact-us-image{
height: 100%;
}
.contact-us-image figure{
height: 100%;
display: block;
}
.contact-us-image img{
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 1 / 0.962;
}
.contact-us-form{
margin-left: 30px;
}
.contact-form .form-control{
font-size: 16px;
font-weight: 500;
line-height: 1.2em;
background-color: var(--white-color);
color: var(--text-color);
border: 1px solid var(--divider-color);
border-radius: 0;
outline: none;
box-shadow: none;
padding: 14px 15px;
}
.contact-form .form-control::placeholder{
font-weight: 400;
}
.google-map{
padding: 50px 0 100px;
}
.google-map .section-title{
width: 100%;
max-width: 560px;
margin: 0 auto 30px;
text-align: center;
}
.google-map-iframe,
.google-map-iframe iframe{
width: 100%;
height: 500px;
}
.contact-info-box{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 60px;
}
.contact-info-item{
width: calc(33.33% - 20px);
display: flex;
}
.contact-info-item .icon-box{
position: relative;
height: 60px;
width: 60px;
background-color: var(--divider-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.contact-info-item .icon-box:before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
background: var(--primary-color);
border-radius: 50%;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.4s ease-in-out;
z-index: 0;
}
.contact-info-item:hover .icon-box:before{
transform: scale(1);
}
.contact-info-item .icon-box i{
position: relative;
font-size: 20px;
color: var(--accent-color);
transition: all 0.3s ease-in-out;
z-index: 1;
}
.contact-info-item:hover .icon-box i{
color: var(--white-color);
}
.contact-info-content{
width: calc(100% - 80px);
}
.contact-info-content h3{
font-size: 20px;
text-transform: capitalize;
margin-bottom: 10px;
}
.contact-info-content p{
margin-bottom: 0;
}
/************************************/
/*** 25. 404 Error Page css ***/
/************************************/
.error-page{
background-image: url(../images/error-page-bg.svg);
background-repeat: no-repeat;
background-position: top -100px center;
background-size: auto;
padding: 100px 0;
}
.error-page-image{
text-align: center;
margin-bottom: 30px;
}
.error-page-image img{
width: 100%;
max-width: 50%;
}
.error-page-content{
width: 100%;
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.error-page-content .section-title{
margin-bottom: 20px;
}
.error-page-content-body p{
font-weight: 500;
margin-bottom: 20px;
}
/************************************/
/*** 26. Responsive css ***/
/************************************/
@media only screen and (max-width: 1366px){
.our-testimonial-content{
padding: 100px 50px;
}
}
@media only screen and (max-width: 1024px){
.main-menu ul li{
margin: 0;
}
.our-testimonial-content{
padding: 50px 20px;
}
}
@media only screen and (max-width: 991px){
.navbar{
padding: 20px 0;
}
/* Adjust scroll padding for mobile */
html,
body {
scroll-padding-top: 80px;
}
section[id] {
scroll-margin-top: 100px;
}
/* Mobile navigation styles */
.main-menu ul li a::after{
display: none; /* Hide underline on mobile for cleaner look */
}
.main-menu ul ul li a::after{
display: none; /* Hide dropdown underline on mobile */
}
.slicknav_nav li,
.slicknav_nav ul{
display: block;
}
.responsive-menu,
.navbar-toggle{
display: block;
}
.header-btn{
display: none;
}
.btn-default{
padding: 14px 42px 14px 16px;
}
.section-row{
margin-bottom: 40px;
}
.section-row .section-title{
margin-bottom: 0;
margin-right: 0px;
}
.section-title-content{
margin-left: 0;
margin-top: 15px;
}
.section-btn{
text-align: left;
margin-top: 15px;
}
.section-title{
margin-bottom: 30px;
}
.section-title h3{
margin-bottom: 10px;
}
.section-title h1{
font-size: 42px;
}
.hero-content .section-title h1{
font-size: 32px;
margin-bottom: 0;
}
.hero-content .section-title h3{
margin-bottom: 8px;
}
.hero-content .section-title p{
margin-top: 12px;
}
.section-title h2{
font-size: 30px;
}
.section-title p{
margin-top: 15px;
}
.hero{
min-height: auto;
padding: 180px 0 140px;
margin-top: -92px;
}
.hero.hero-slider-layout .hero-slide{
padding: 0;
height: calc(100vh + 40px);
min-height: calc(100vh + 40px);
display: flex;
align-items: center;
}
.hero.hero-slider-layout .row.align-items-center{
min-height: calc(100vh + 40px);
height: calc(100vh + 40px);
align-items: flex-end !important;
padding-bottom: 60px;
}
.hero.hero-slider-layout .hero-pagination{
bottom: 15px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.hero-scroll-arrow {
bottom: 15px;
right: 15px;
}
.hero-scroll-arrow a {
width: 20px;
height: 20px;
}
.hero-scroll-arrow a::before {
width: 20px;
height: 4px;
}
.hero-content .section-title p{
font-size: 16px;
}
.about-us{
padding: 50px 0;
}
.about-us-images{
margin: 0 0 30px 0;
}
.experience-counter{
height: 137px;
width: 137px;
}
.experience-counter h3{
font-size: 28px;
}
.about-us-content-list{
margin-bottom: 30px;
}
.about-contact-item{
margin-bottom: 30px;
}
.why-choose-us{
padding: 50px 0;
}
.why-choose-content{
margin-bottom: 30px;
}
.why-choose-item .icon-box{
margin-right: 10px;
}
.why-choose-item-content{
width: calc(100% - 70px);
}
.why-choose-images{
margin-left: 0;
}
.our-services{
padding: 50px 0;
}
.service-image img{
aspect-ratio: 1 / 1.2;
}
.service-btn{
top: 20px;
right: 20px;
}
.service-btn a{
height: 50px;
width: 50px;
}
.service-content{
bottom: 20px;
left: 20px;
right: 20px;
}
.all-services-btn{
margin-top: 10px;
}
.video-play-button a{
width: 80px;
height: 80px;
}
.our-project{
padding: 50px 0 20px;
}
.our-Project-nav{
margin-bottom: 50px;
}
.project-featured-image img{
aspect-ratio: 1 / 0.89;
}
.project-btn a{
width: 80px;
height: 80px;
}
.project-content{
left: 20px;
bottom: 20px;
right: 20px;
}
.how-we-work{
padding: 50px 0;
}
.how-we-work-item{
width: calc(50% - 15px);
}
.how-we-work-item:nth-child(5),
.how-we-work-item:nth-child(6),
.how-we-work-item:nth-child(7),
.how-we-work-item:nth-child(8) {
width: calc(50% - 15px);
}
.how-we-work-item .icon-box{
margin-bottom: 20px;
}
.how-we-work-list .how-we-work-item .icon-box{
width: 220px;
height: 220px;
}
/* Responsive content for tablets */
.how-we-work-list .how-we-work-item .icon-box .certificate-icon,
.how-we-work-content {
width: 180px;
height: 180px;
}
.how-we-work-content {
padding: 22px;
}
.how-we-work-content h3{
font-size: 14px;
margin-bottom: 8px;
}
.how-we-work-content p{
font-size: 11px;
}
.how-work-company-slider{
margin-top: 40px;
padding-top: 40px;
}
.our-skill{
padding: 50px 0;
}
.our-skill-content{
margin-bottom: 30px;
}
.skills-progress-bar{
margin-bottom: 30px;
}
.our-skill-image{
max-width: 555px;
margin: 0 auto;
}
.our-testimonials-image{
height: auto;
}
.our-testimonials-image figure,
.our-testimonials-image figure img{
height: auto;
aspect-ratio: 1 / 0.65;
}
.our-testimonial-content{
padding: 50px 15px;
}
.our-testimonial-content .section-title{
background-size: contain;
}
.testimonial-slider{
max-width: 100%;
margin-bottom: 30px;
padding-bottom: 30px;
}
.testimonial-rating{
margin-bottom:15px;
}
.testimonial-content{
margin-bottom: 30px;
}
.testimonial-content p{
font-size: 18px;
}
.testimonial-rating-counter .rating-counter h2{
font-size: 48px;
}
.our-blog{
padding: 50px 0;
}
.our-blog .section-title{
margin-right: 0;
}
.post-featured-image img{
aspect-ratio: 1 / 0.75;
}
.our-blog-footer{
margin-top: 10px;
}
.main-footer{
padding: 40px 0 0;
}
.main-footer .footer-header{
margin-bottom: 30px;
padding-bottom: 30px;
}
.footer-links{
padding-right: 0;
margin-bottom: 30px;
}
.footer-newsletter-form p{
margin-bottom: 20px;
}
.footer-copyright{
margin-top: 0px;
padding: 20px 0;
}
.page-header{
padding: 180px 0 100px;
margin-top: -92px;
}
.page-header-box h1{
font-size: 50px;
}
.page-header-box ol li.breadcrumb-item{
font-size: 18px;
}
.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
font-size: 16px;
}
.about-facility-list{
margin-top: 50px;
gap: 20px;
}
.about-facility-item{
width: calc(33.33% - 13.33px);
}
.about-facility-item .icon-box{
height: 45px;
width: 45px;
margin-right: 10px;
}
.about-facility-item .icon-box img{
max-width: 20px;
}
.about-facility-content{
width: calc(100% - 55px);
}
.about-facility-content h3{
font-size: 18px;
}
.vision-mission{
padding: 50px 0 25px;
}
.vision-mission-box{
padding: 30px 15px;
gap: 30px 40px;
}
.vision-mission-item{
width: calc(50% - 20px);
}
.vision-mission-item::before{
right: -20px;
}
.vision-mission-item .icon-box{
width: 70px;
height: 70px;
}
.vision-mission-item .icon-box img{
max-width: 30px;
}
.vision-mission-content h3{
margin-bottom: 15px;
}
.best-selling{
padding: 25px 0 50px;
}
.best-selling-content{
margin-bottom: 20px;
}
.best-selling-content-img{
margin-bottom: 20px;
}
.our-team{
padding: 50px 0 20px;
}
.team-member-item {
margin-bottom: 30px;
border-radius: 15px;
}
.team-image .team-icon-box {
width: 100px;
height: 100px;
}
.team-image .team-icon-box i {
font-size: 40px !important;
}
.team-content h3 {
font-size: 20px;
}
.team-content p {
font-size: 13px;
}
.team-readmore-btn{
top: 20px;
right: 20px;
}
.team-readmore-btn a{
width: 50px;
height: 50px;
}
.team-content{
margin-bottom: 15px;
}
.our-faqs{
padding: 50px 0;
}
.our-faqs-content{
margin-right: 0;
margin-bottom: 30px;
}
.faq-accordion .accordion-item{
margin-bottom: 20px;
}
.our-faqs-image{
text-align: center;
margin-left: 0px;
}
.our-faqs-image img{
aspect-ratio: 1 / 0.8;
}
.our-clients{
padding: 50px 0;
}
.our-clients .our-clients-box{
max-width: 100%;
}
.page-services{
padding: 50px 0 20px;
}
.page-service-single{
padding: 50px 0;
}
.service-sidebar{
position: initial;
margin-right: 0;
margin-bottom: 30px;
}
.service-catagery-list{
padding: 20px;
margin-bottom: 30px;
}
.service-catagery-list h3{
padding-bottom: 15px;
margin-bottom: 15px;
}
.service-catagery-list ul li{
margin-bottom: 10px;
}
.service-catagery-list ul li a::before{
width: 16px;
height: 16px;
}
.sidebar-cta-Body{
padding: 20px;
}
.sidebar-cta-content{
margin-bottom: 15px;
}
.sidebar-cta-contact-item{
margin-bottom: 15px;
}
.service-feature-image{
margin-bottom: 30px;
}
.service-entry{
margin-bottom: 30px;
}
.service-entry ul li{
font-size: 14px;
padding-left: 25px;
margin-bottom: 10px;
}
.service-entry ul li::before{
font-size: 18px;
}
.why-choose-content.service-single-why-choose{
margin-bottom: 30px;
}
.page-blog{
padding: 50px 0;
}
.page-pagination{
margin-top: 10px;
}
.page-single-post{
padding: 50px 0;
}
.post-image{
margin-bottom: 20px;
}
.post-entry blockquote{
background-position: 25px 25px;
background-size: 50px;
padding: 25px 25px 25px 90px;
margin-bottom: 20px;
}
.post-entry blockquote p{
font-size: 18px;
}
.post-entry h2{
font-size: 38px;
}
.post-entry ul li{
font-size: 16px;
}
.post-tags{
margin-bottom: 20px;
}
.post-social-sharing ul{
text-align: left;
}
.post-tags .tag-links a{
padding: 6px 15px;
}
.page-project{
padding: 50px 0 20px;
}
.page-project-single{
padding: 50px 0;
}
.project-single-sidebar{
position: initial;
margin-right: 0px;
margin-bottom: 30px
}
.project-detail-list{
padding: 20px;
margin-bottom: 30px;
}
.project-single-image{
margin-bottom: 30px;
}
.project-info,
.project-design-info{
margin-bottom: 30px;
}
.project-entry h2{
font-size: 36px;
margin-bottom: 20px;
}
.page-gallery{
padding: 50px 0 20px;
}
.page-gallery-box .photo-gallery img{
aspect-ratio: 1 / 0.85;
}
.page-faqs{
padding: 50px 0;
}
.faq-sidebar{
position: initial;
margin-right: 0;
margin-bottom: 30px;
}
.faq-catagery-list{
padding: 20px;
margin-bottom: 30px;
}
.faq-catagery-list ul li{
margin-bottom: 15px;
}
.faq-catagery-list ul li a::before{
width: 16px;
height: 16px;
}
.our-faq-section.page-faq-accordion{
margin-bottom: 40px;
}
.page-contact-us{
padding: 50px 0 25px;
}
.contact-us-image{
height: auto;
margin-bottom: 30px;
}
.contact-us-image img{
aspect-ratio: 1 / 0.6;
}
.contact-us-form{
margin-left: 0;
}
.contact-form .form-control{
padding: 12px 15px;
}
.google-map{
padding: 25px 0 50px;
}
.google-map-iframe,
.google-map-iframe iframe{
height: 400px;
}
.contact-info-box{
gap: 20px;
margin-top: 40px;
}
.contact-info-item{
width: calc(33.33% - 13.33px);
}
.contact-info-item .icon-box{
height: 50px;
width: 50px;
margin-right: 10px;
}
.contact-info-item .icon-box i{
font-size: 16px;
}
.contact-info-content{
width: calc(100% - 60px);
}
.contact-info-content h3{
font-size: 18px;
}
.error-page{
padding: 50px 0;
}
.error-page-image img{
max-width: 80%;
}
}
@media only screen and (max-width: 767px){
.section-row{
margin-bottom: 30px;
}
/* Adjust scroll padding for smaller screens */
html,
body {
scroll-padding-top: 70px;
}
section[id] {
scroll-margin-top: 90px;
}
.section-title{
margin-bottom: 30px;
}
.section-title h1{
font-size: 24px;
}
.section-title h2{
font-size: 22px;
}
.hero-content .section-title p{
font-size: 15px;
}
.hero-content .btn-default{
margin-right: 40px;
margin-bottom: 10px;
}
.hero-content .btn-default.btn-highlighted{
margin: 0;
}
.about-us-images{
background-position: left 10px bottom 10px;
background-size: 20% auto;
padding: 10px 45px 100px 0;
}
.feedback-counter{
transform: rotate(-180deg) translate(0, 0);
}
.feedback-counter p{
font-size: 12px;
height: 38px;
width: 38px;
margin: 0 0 6px 0;
}
.feedback-counter h3{
font-size: 12px;
width: calc(100% - 40px);
}
.about-img-2{
max-width: 240px;
}
.experience-counter{
height: 102px;
width: 102px;
}
.experience-counter h3{
font-size: 22px;
}
.experience-counter p{
font-size: 12px;
line-height: 1.1em;
}
.about-us-content-body{
gap: 0px;
}
.about-us-content-body::before{
display: none;
}
.about-us-content-info{
width: 100%;
border-bottom: 1px solid var(--divider-color);
padding-bottom: 15px;
margin-bottom: 15px;
}
.about-us-content-list{
margin-bottom: 20px;
}
.about-us-contact-list{
width: 100%;
}
.about-us-content-list ul li{
margin-bottom: 10px;
}
.about-us-content-list ul li::before{
font-size: 18px;
top: 3px;
}
.about-contact-item{
margin-bottom: 20px;
}
.about-contact-content h3{
font-size: 18px;
}
.why-choose-item-content h3{
font-size: 18px;
margin-bottom: 5px;
}
.why-choose-img-2 img{
aspect-ratio: 1 / 1.02;
}
.why-choose-img-4 img{
aspect-ratio: 1 / 1.588;
}
.service-content h3{
font-size: 18px;
}
.intro-video-image img{
aspect-ratio: 1 / 0.7;
}
.project-btn a{
width: 60px;
height: 60px;
}
.project-btn img{
max-width: 20px;
}
.project-content h2{
font-size: 18px;
}
.how-we-work-item{
width: calc(50% - 10px);
margin-bottom: 30px;
}
.how-we-work-item:nth-child(5),
.how-we-work-item:nth-child(6),
.how-we-work-item:nth-child(7),
.how-we-work-item:nth-child(8) {
width: calc(50% - 10px);
}
.how-we-work-item .icon-box img{
max-width: 50px;
}
.how-we-work-list .how-we-work-item .icon-box{
width: 180px;
height: 180px;
}
/* Mobile responsive content */
.how-we-work-list .how-we-work-item .icon-box .certificate-icon,
.how-we-work-content {
width: 150px;
height: 150px;
}
.how-we-work-content {
padding: 18px;
}
.how-we-work-content h3{
font-size: 12px;
margin-bottom: 6px;
}
.how-we-work-content p{
font-size: 9px;
line-height: 1.2;
}
.how-work-company-slider{
margin-top: 30px;
padding-top: 30px;
}
.our-skill-image{
padding-bottom: 83px;
}
.our-skill-img-1{
width: 200px;
padding: 20px 0 0 20px;
}
.our-skill-img-2{
width: 130px;
top: 20px;
}
.our-skill-img-3{
width: 200px;
}
.testimonial-rating{
margin-bottom: 10px;
}
.testimonial-rating i{
font-size: 16px;
}
.testimonial-content{
margin-bottom: 20px;
}
.testimonial-content p{
font-size: 16px;
}
.testimonial-body .author-content h3{
font-size: 18px;
}
.testimonial-rating-counter .rating-counter h2{
font-size: 38px;
}
.post-featured-image{
margin-bottom: 15px;
}
.post-item-content{
margin-bottom: 10px;
}
.post-item-content h3{
font-size: 18px;
}
.footer-logo{
margin-bottom: 20px;
}
.footer-social-links{
justify-content: start;
gap: 20px;
}
.footer-social-link-title h3{
font-size: 18px;
}
.footer-links h3{
margin-bottom: 15px;
}
.footer-links ul li{
margin-bottom: 5px;
}
.footer-copyright{
padding: 15px 0;
}
.page-header-box h1{
font-size: 28px;
margin-bottom: 5px;
}
.page-header-box ol li.breadcrumb-item{
font-size: 16px;
}
.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
font-size: 14px;
}
.about-facility-item{
width: 100%;
}
.vision-mission{
background: linear-gradient(180deg, var(--primary-color) 40%, var(--white-color) 40%);
}
.vision-mission-box{
padding: 20px;
gap: 40px;
}
.vision-mission-item{
width: 100%;
}
.vision-mission-item::before{
height: 1px;
width: 100%;
top: auto;
right: 0;
bottom: -20px;
}
.vision-mission-item:nth-child(2n + 2)::before{
display: block;
}
.vision-mission-item:last-child::before{
display: none;
}
.vision-mission-content h3{
font-size: 18px;
}
.team-content h3{
font-size: 18px;
margin-bottom: 5px;
}
.faq-accordion .accordion-header .accordion-button{
font-size: 18px;
padding-right: 30px;
}
.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
top: 2px;
}
.faq-accordion .accordion-body{
padding-right: 0;
}
.our-faqs-image img{
aspect-ratio: 1 / 1.26;
}
.service-catagery-list h3{
font-size: 18px;
}
.sidebar-cta-content h3{
font-size: 18px;
}
.service-entry p{
margin-bottom: 15px;
}
.service-feature-image{
margin-bottom: 20px;
}
.service-feature-image img{
aspect-ratio: 1 / 0.7;
}
.service-entry-list-image{
gap: 20px;
}
.service-entry-image,
.service-entry-list{
width: 100%;
}
.post-image figure,
.post-image img{
aspect-ratio: 1 / 0.70;
}
.post-entry blockquote{
background-position: 20px 20px;
padding: 70px 20px 20px 20px;
}
.post-entry h2{
font-size: 26px;
}
.project-single-image{
margin-bottom: 20px;
}
.project-single-image img{
aspect-ratio: 1 / 0.7;
}
.project-info,
.project-design-highlight{
margin-bottom: 20px;
}
.project-entry h2{
font-size: 26px;
margin-bottom: 15px;
}
.project-entry p{
margin-bottom: 15px;
}
.project-entry ul li{
margin-bottom: 10px;
}
.project-entry ul li::before{
font-size: 18px;
top: 5px;
}
.project-gallery-images{
gap: 20px;
}
.project-gallery-img{
width: calc(50% - 10px);
}
.contact-us-image img{
aspect-ratio: 1 / 0.75;
}
.google-map-iframe,
.google-map-iframe iframe{
height: 350px;
}
.contact-info-item{
width: 100%;
}
.error-page-image img{
max-width: 100%;
}
}
/* Updated Preloader Styles */
.preloader{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background-color: #a6d7ff;
display: flex;
align-items: center;
justify-content: center;
}
.preloader-wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Logo below hexa loader */
.preloader-logo {
margin-top: 40px;
max-width: 120px;
height: auto;
/* filter: brightness(0) invert(1); */
/* animation: logoFadeIn 1s ease-in-out 0.5s both; */
}
@keyframes logoFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive logo sizing */
@media (max-width: 768px) {
.preloader-logo {
max-width: 100px;
margin-top: 30px;
}
}
@media (max-width: 480px) {
.preloader-logo {
max-width: 80px;
margin-top: 25px;
}
}
.socket-wrapper {
position: relative;
width: 210px;
height: 224px;
}
.socket {
width: 200px;
height: 200px;
position: absolute;
left: 100px;
margin-left: -100px;
top: 100px;
margin-top: -100px;
}
.hex-brick {
background: var(--accent-color);
width: 30px;
height: 17px;
position: absolute;
top: 5px;
}
.h2 {
transform: rotate(60deg);
}
.h3 {
transform: rotate(-60deg);
}
.gel {
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
}
.center-gel {
margin-left: -15px;
margin-top: -15px;
-webkit-animation-name: pulse-gel;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.r1 {
-webkit-animation-name: pulse-gel;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .1s;
}
.r2 {
-webkit-animation-name: pulse-gel;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .3s;
}
.r3 {
-webkit-animation-name: pulse-gel;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: .6s;
}
.c1 {
margin-left: -47px;
margin-top: -15px;
}
.c2 {
margin-left: -31px;
margin-top: -43px;
}
.c3 {
margin-left: 1px;
margin-top: -43px;
}
.c4 {
margin-left: 17px;
margin-top: -15px;
}
.c5 {
margin-left: -31px;
margin-top: 13px;
}
.c6 {
margin-left: 1px;
margin-top: 13px;
}
.c7 {
margin-left: -63px;
margin-top: -43px;
}
.c8 {
margin-left: 33px;
margin-top: -43px;
}
.c9 {
margin-left: -15px;
margin-top: 41px;
}
.c10 {
margin-left: -63px;
margin-top: 13px;
}
.c11 {
margin-left: 33px;
margin-top: 13px;
}
.c12 {
margin-left: -15px;
margin-top: -71px;
}
.c13 {
margin-left: -47px;
margin-top: -71px;
}
.c14 {
margin-left: 17px;
margin-top: -71px;
}
.c15 {
margin-left: -47px;
margin-top: 41px;
}
.c16 {
margin-left: 17px;
margin-top: 41px;
}
.c17 {
margin-left: -79px;
margin-top: -15px;
}
.c18 {
margin-left: 49px;
margin-top: -15px;
}
.c19 {
margin-left: -63px;
margin-top: -99px;
}
.c20 {
margin-left: 33px;
margin-top: -99px;
}
.c21 {
margin-left: 1px;
margin-top: -99px;
}
.c22 {
margin-left: -31px;
margin-top: -99px;
}
.c23 {
margin-left: -63px;
margin-top: 69px;
}
.c24 {
margin-left: 33px;
margin-top: 69px;
}
.c25 {
margin-left: 1px;
margin-top: 69px;
}
.c26 {
margin-left: -31px;
margin-top: 69px;
}
.c27 {
margin-left: -79px;
margin-top: -15px;
}
.c28 {
margin-left: -95px;
margin-top: -43px;
}
.c29 {
margin-left: -95px;
margin-top: 13px;
}
.c30 {
margin-left: 49px;
margin-top: 41px;
}
.c31 {
margin-left: -79px;
margin-top: -71px;
}
.c32 {
margin-left: -111px;
margin-top: -15px;
}
.c33 {
margin-left: 65px;
margin-top: -43px;
}
.c34 {
margin-left: 65px;
margin-top: 13px;
}
.c35 {
margin-left: -79px;
margin-top: 41px;
}
.c36 {
margin-left: 49px;
margin-top: -71px;
}
.c37 {
margin-left: 81px;
margin-top: -15px;
}
@keyframes text-cycle1 {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
15% {
opacity: 1;
}
20% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes text-cycle2 {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes text-cycle3 {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
45% {
opacity: 1;
}
55% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes text-cycle4 {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
65% {
opacity: 1;
}
75% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes text-cycle5 {
0% {
opacity: 0;
}
80% {
opacity: 0;
}
85% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes pulse-gel {
0% {
transform: scale(1);
}
50% {
transform: scale(0.01);
}
100% {
transform: scale(1);
}
}
.r1 {
opacity: 0.7;
}
.r2 {
opacity: 0.5;
}
.r3 {
opacity: 0.3;
}
/* Modern Our Products Section */
.our-products-modern {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
position: relative;
}
.our-products-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/bg-pattern-fiber.webp') center/cover;
opacity: 0.1;
z-index: 0;
}
.our-products-modern .container {
position: relative;
z-index: 1;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-top: 50px;
}
.product-card {
background: #ffffff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(135, 206, 235, 0.1);
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), #5bc0de);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
.product-card:hover::before {
transform: scaleX(1);
}
.product-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--accent-color), #5bc0de);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.product-card:hover .product-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 24px rgba(135, 206, 235, 0.3);
}
.product-icon i {
font-size: 24px;
color: #ffffff;
}
.product-content h4 {
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
line-height: 1.3;
text-transform: capitalize;
}
.product-specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.spec {
background: rgba(135, 206, 235, 0.1);
color: var(--accent-color);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(135, 206, 235, 0.2);
}
.product-content p {
color: #666;
line-height: 1.6;
font-size: 14px;
margin: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.product-card {
padding: 24px;
}
.product-icon {
width: 50px;
height: 50px;
}
.product-icon i {
font-size: 20px;
}
.product-content h4 {
font-size: 18px;
}
}
@media (max-width: 480px) {
.our-products-modern {
padding: 60px 0;
}
.product-card {
padding: 20px;
}
.product-specs {
flex-direction: column;
}
.spec {
text-align: center;
}
}
/* Stunning Animated Our Products Section */
.our-products-modern {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #87CEEB 100%);
background-size: 400% 400%;
padding: 100px 0;
position: relative;
overflow: hidden;
animation: gradientShift 15s ease infinite;
}
.our-products-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/bg-pattern-fiber.webp') center/cover;
opacity: 0.2;
z-index: 0;
animation: float 20s ease-in-out infinite;
}
.our-products-modern::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(135, 206, 235, 0.15) 0%, transparent 70%);
animation: rotate 30s linear infinite;
z-index: 0;
}
/* Enhanced Background Elements */
.our-products-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(135, 206, 235, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
animation: backgroundPulse 8s ease-in-out infinite;
z-index: 0;
}
@keyframes backgroundPulse {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.1);
}
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(1deg); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.our-products-modern .container {
position: relative;
z-index: 2;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 60px;
perspective: 1000px;
}
.product-card {
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
border: none;
transform-style: preserve-3d;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1) translateY(0px) !important;
min-height: 400px;
display: flex;
flex-direction: column;
perspective: 1000px;
cursor: pointer;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #87CEEB);
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
z-index: 1;
}
.product-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(135, 206, 235, 0.1) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.8s ease;
z-index: 1;
}
.product-card:hover::before {
transform: translateX(100%);
}
.product-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de);
border-radius: 24px;
z-index: -1;
opacity: 0;
transition: opacity 0.6s ease;
animation: borderGlow 3s ease-in-out infinite;
}
.product-card:hover::after {
opacity: 1;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.product-card:hover {
transform: translateY(-20px) rotateX(10deg) rotateY(5deg);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
}
.product-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 30px 30px 20px 30px;
position: relative;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}
.product-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: translateX(-100%);
transition: transform 0.8s ease;
}
.product-card:hover .product-icon::before {
transform: translateX(100%);
}
.product-card:hover .product-icon {
transform: scale(1.1) translateZ(15px);
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.3);
background: linear-gradient(135deg, #87CEEB, #5bc0de);
}
.product-card:hover .product-icon i {
transform: scale(1.2) rotate(-10deg);
animation: iconPulse 2s ease-in-out infinite;
}
/* Focus Effect for Icons */
.products-grid:hover .product-card:not(:hover) .product-icon {
transform: scale(0.9) translateZ(0px);
opacity: 0.6;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.products-grid:hover .product-card:not(:hover) .product-icon i {
transform: scale(0.8);
opacity: 0.5;
}
.product-icon i {
font-size: 32px;
color: #ffffff;
transition: all 0.6s ease;
z-index: 2;
position: relative;
}
.product-card:hover .product-icon i {
transform: scale(1.1) rotate(-15deg);
animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1.1) rotate(-15deg); }
50% { transform: scale(1.3) rotate(-15deg); }
}
.product-content {
position: relative;
z-index: 2;
padding: 0 30px 30px 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.product-content h4 {
font-size: 22px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 12px;
line-height: 1.3;
text-transform: capitalize;
transition: all 0.6s ease;
position: relative;
letter-spacing: -0.5px;
}
.product-card:hover .product-content h4 {
transform: translateX(10px);
color: #667eea;
}
.product-content h4::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
transition: width 0.6s ease;
border-radius: 2px;
}
.product-card:hover .product-content h4::after {
width: 100%;
}
.product-specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
opacity: 1;
transform: translateY(0);
}
.spec {
background: rgba(102, 126, 234, 0.08);
color: #667eea;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(102, 126, 234, 0.15);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.spec::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.product-card:hover .spec::before {
left: 100%;
}
.product-card:hover .spec {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.product-content p {
color: #666;
line-height: 1.6;
font-size: 14px;
margin: 0;
transition: all 0.6s ease;
opacity: 1;
transform: translateY(0);
flex: 1;
margin-top: auto;
}
.product-card:hover .product-content p {
color: #333;
transform: translateY(0);
}
/* Floating Particles Animation */
.product-card::before {
content: '';
position: absolute;
top: 20px;
right: 20px;
width: 6px;
height: 6px;
background: #87CEEB;
border-radius: 50%;
animation: floatParticle 4s ease-in-out infinite;
z-index: 3;
opacity: 0.7;
}
.product-card::after {
content: '';
position: absolute;
bottom: 30px;
left: 30px;
width: 4px;
height: 4px;
background: #764ba2;
border-radius: 50%;
animation: floatParticle 3s ease-in-out infinite reverse;
z-index: 3;
opacity: 0.7;
}
@keyframes floatParticle {
0%, 100% { transform: translateY(0px) scale(1); opacity: 0.7; }
50% { transform: translateY(-15px) scale(1.2); opacity: 1; }
}
/* Responsive Design */
@media (max-width: 768px) {
.products-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.product-card {
min-height: 350px;
}
.product-icon {
width: 50px;
height: 50px;
margin: 25px 25px 15px 25px;
}
.product-icon i {
font-size: 20px;
}
.product-content {
padding: 0 25px 25px 25px;
}
.product-content h4 {
font-size: 20px;
}
}
@media (max-width: 480px) {
.our-products-modern {
padding: 80px 0;
}
.product-card {
padding: 25px;
}
.product-specs {
flex-direction: column;
}
.spec {
text-align: center;
}
}
/* Additional Stunning Effects */
.particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 10;
animation: particleFloat 3s ease-in-out infinite;
}
@keyframes particleFloat {
0%, 100% {
transform: translateY(0px) scale(1);
opacity: 0.3;
}
50% {
transform: translateY(-20px) scale(1.2);
opacity: 1;
}
}
.floating-element {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 1;
animation: floatElement 8s ease-in-out infinite;
}
@keyframes floatElement {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
opacity: 0.1;
}
50% {
transform: translateY(-30px) rotate(180deg) scale(1.1);
opacity: 0.3;
}
}
/* Stunning 3D Zoom Effect */
.product-card {
transform-style: preserve-3d;
perspective: 1200px;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.product-card {
transform: scale(1) !important;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.product-card:hover {
transform: translateY(-12px) scale(1.05) translateZ(30px) !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.product-card:hover::after {
opacity: 1;
}
/* Focus Effect - Other cards zoom out when one is hovered */
.products-grid:hover .product-card:not(:hover) {
transform: scale(0.98) translateY(5px) !important;
opacity: 0.8;
filter: blur(0.5px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Enhanced Zoom Effect with Glow */
.product-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de, #667eea);
background-size: 400% 400%;
border-radius: 24px;
z-index: -1;
opacity: 0;
transition: opacity 0.6s ease;
animation: borderGlow 3s ease-in-out infinite, gradientShift 4s ease infinite;
}
.product-card:hover::before {
opacity: 1;
}
.product-card:hover .product-icon {
transform: scale(1.15) translateZ(20px);
box-shadow: 0 15px 35px rgba(135, 206, 235, 0.4);
}
.product-card:hover .product-content {
transform: translateZ(30px);
}
/* Glowing Border Animation */
.product-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de, #667eea);
background-size: 400% 400%;
border-radius: 24px;
z-index: -1;
opacity: 0;
transition: opacity 0.6s ease;
animation: borderGlow 3s ease-in-out infinite, gradientShift 4s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.product-card:hover::before {
opacity: 1;
}
/* Icon Morphing Animation */
.product-icon {
position: relative;
overflow: hidden;
}
.product-icon::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transform: translateX(-100%) skewX(-15deg);
transition: transform 0.8s ease;
}
.product-card:hover .product-icon::after {
transform: translateX(100%) skewX(-15deg);
}
/* Text Glow Effect */
.product-content h4 {
text-shadow: 0 0 10px rgba(102, 126, 234, 0);
transition: text-shadow 0.6s ease;
}
.product-card:hover .product-content h4 {
text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
/* Spec Badge Pulse Animation */
.spec {
animation: specPulse 4s ease-in-out infinite;
}
@keyframes specPulse {
0%, 100% {
box-shadow: 0 0 0 rgba(102, 126, 234, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
}
}
.product-card:hover .spec {
animation: specPulse 1s ease-in-out infinite;
}
/* Content Slide Animation */
.product-content {
transform: translateZ(20px);
}
.product-card:hover .product-content {
transform: translateZ(30px);
}
/* Background Parallax Effect */
.our-products-modern {
background-attachment: fixed;
}
/* Enhanced Responsive Animations */
@media (max-width: 768px) {
.product-card:hover {
transform: translateY(-10px) scale(1.05) translateZ(30px);
}
.product-card:hover .product-icon {
transform: scale(1.15) translateZ(20px);
}
.floating-element {
display: none;
}
}
@media (max-width: 480px) {
.product-card:hover {
transform: translateY(-5px) scale(1.03) translateZ(20px);
}
.product-card:hover .product-icon {
transform: scale(1.1) translateZ(15px);
}
.particle {
display: none;
}
}
/* Additional Stunning Background Effects */
.our-products-modern {
position: relative;
}
.our-products-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(135, 206, 235, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
animation: backgroundPulse 8s ease-in-out infinite;
z-index: 0;
}
/* Animated Geometric Shapes */
.our-products-modern::after {
content: '';
position: absolute;
top: 10%;
left: 5%;
width: 100px;
height: 100px;
background: linear-gradient(45deg, rgba(135, 206, 235, 0.1), rgba(102, 126, 234, 0.1));
border-radius: 50%;
animation: floatShape 12s ease-in-out infinite;
z-index: 1;
}
.our-products-modern::before {
content: '';
position: absolute;
top: 60%;
right: 10%;
width: 80px;
height: 80px;
background: linear-gradient(45deg, rgba(118, 75, 162, 0.1), rgba(135, 206, 235, 0.1));
border-radius: 20px;
transform: rotate(45deg);
animation: floatShape 15s ease-in-out infinite reverse;
z-index: 1;
}
@keyframes floatShape {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
opacity: 0.3;
}
50% {
transform: translateY(-30px) rotate(180deg) scale(1.2);
opacity: 0.6;
}
}
/* Enhanced Particle System */
.our-products-modern {
background:
linear-gradient(135deg, #667eea 0%, #764ba2 50%, #87CEEB 100%),
radial-gradient(circle at 30% 70%, rgba(135, 206, 235, 0.2) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(102, 126, 234, 0.2) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(118, 75, 162, 0.1) 0%, transparent 60%);
background-size: 400% 400%, 200% 200%, 300% 300%, 400% 400%;
animation:
gradientShift 15s ease infinite,
backgroundMove 20s ease infinite;
}
@keyframes backgroundMove {
0%, 100% {
background-position: 0% 50%, 0% 0%, 100% 100%, 50% 50%;
}
50% {
background-position: 100% 50%, 100% 100%, 0% 0%, 0% 100%;
}
}
/* Glowing Border Effect */
.our-products-modern {
position: relative;
}
.our-products-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
transparent 0%,
rgba(135, 206, 235, 0.1) 25%,
rgba(102, 126, 234, 0.1) 50%,
rgba(118, 75, 162, 0.1) 75%,
transparent 100%);
background-size: 400% 400%;
animation: borderGlow 10s ease infinite;
z-index: 0;
}
@keyframes borderGlow {
0%, 100% {
background-position: 0% 50%;
opacity: 0.3;
}
50% {
background-position: 100% 50%;
opacity: 0.6;
}
}
/* Enhanced Container with Glass Effect */
.our-products-modern .container {
position: relative;
z-index: 4;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
/* Ensure products grid is visible */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 60px;
perspective: 1000px;
opacity: 1 !important;
visibility: visible !important;
}
/* Enhanced Section Title Visibility */
.our-products-modern .section-title {
position: relative;
z-index: 10;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
padding: 30px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.our-products-modern .section-title h3 {
color: #667eea;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
.our-products-modern .section-title h2 {
color: #1a1a1a;
font-weight: 700;
margin-bottom: 15px;
}
.our-products-modern .section-title p {
color: #666;
font-size: 16px;
line-height: 1.6;
}
/* Background Particles and Shapes */
.bg-particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 1;
animation: particleFloat 4s ease-in-out infinite;
filter: blur(1px);
}
.floating-shape {
position: absolute;
pointer-events: none;
z-index: 1;
animation: shapeFloat 6s ease-in-out infinite;
filter: blur(0.5px);
}
@keyframes particleFloat {
0%, 100% {
transform: translateY(0px) scale(1) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translateY(-20px) scale(1.2) rotate(180deg);
opacity: 0.8;
}
}
@keyframes shapeFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
opacity: 0.2;
}
50% {
transform: translateY(-30px) rotate(360deg) scale(1.3);
opacity: 0.6;
}
}
/* Enhanced Glass Morphism Effect */
.our-products-modern .container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
/* Responsive Background Adjustments */
@media (max-width: 768px) {
.bg-particle, .floating-shape {
display: none;
}
.our-products-modern {
background-size: 200% 200%;
}
}
@media (max-width: 480px) {
.our-products-modern .container {
backdrop-filter: blur(10px);
padding: 15px;
}
}
/* Focus Effect for Content */
.products-grid:hover .product-card:not(:hover) .product-content {
transform: translateZ(0px);
opacity: 0.6;
}
.products-grid:hover .product-card:not(:hover) .product-content h4 {
color: #999;
transition: color 0.4s ease;
}
.products-grid:hover .product-card:not(:hover) .product-content p {
color: #bbb;
transition: color 0.4s ease;
}
/* 3D Card Front Face */
.product-card-front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
display: flex;
flex-direction: column;
z-index: 2;
transform: rotateY(0deg);
}
/* 3D Card Back Face */
.product-card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
display: flex;
flex-direction: column;
transform: rotateY(180deg);
z-index: 1;
color: white;
padding: 30px;
transform-origin: center;
}
/* Fix text direction and prevent overlap */
.product-card-front *,
.product-card-back * {
backface-visibility: hidden;
}
.product-card-back {
transform: rotateY(180deg);
}
/* Ensure back content is properly oriented */
.product-card-back .back-content,
.product-card-back .back-icon,
.product-card-back .back-specs,
.product-card-back .back-description {
transform: rotateY(180deg);
}
/* Flip Animation */
.product-card:hover .product-card-front {
transform: rotateY(180deg);
}
.product-card:hover .product-card-back {
transform: rotateY(0deg);
}
.product-card:hover .product-card-back .back-content,
.product-card:hover .product-card-back .back-icon,
.product-card:hover .product-card-back .back-specs,
.product-card:hover .product-card-back .back-description {
transform: rotateY(0deg);
}
/* Back Card Elements */
.back-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 20px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.back-icon i {
font-size: 24px;
color: #ffffff;
}
.back-content h4 {
font-size: 20px;
font-weight: 600;
color: #ffffff;
margin-bottom: 15px;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: -0.5px;
}
.back-specs {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.back-spec {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.back-spec strong {
color: #ffffff;
font-weight: 600;
}
.back-description p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
font-size: 14px;
margin: 0;
}
/* Enhanced 3D Effects */
.product-card:hover {
transform: translateY(-8px) scale(1.02) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
/* Focus Effect for 3D Cards */
.products-grid:hover .product-card:not(:hover) {
transform: scale(0.98) translateY(5px) !important;
opacity: 0.8;
filter: blur(0.5px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Responsive 3D Cards */
@media (max-width: 768px) {
.product-card {
min-height: 350px;
}
.back-content {
padding: 20px;
}
.back-icon {
width: 50px;
height: 50px;
}
.back-icon i {
font-size: 20px;
}
.back-content h4 {
font-size: 18px;
}
}
/* Prevent overlap and ensure proper 3D rendering */
.product-card {
transform-style: preserve-3d;
perspective: 1000px;
}
.product-card-front,
.product-card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
overflow: hidden;
}
/* Ensure content doesn't overflow */
.product-card-front .product-content,
.product-card-back .back-content {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Fix any potential z-index issues */
.product-card-front {
z-index: 2;
}
.product-card-back {
z-index: 1;
}
/* Enhanced Background with Free Patterns */
.our-products-modern {
background:
linear-gradient(135deg, #667eea 0%, #764ba2 50%, #87CEEB 100%),
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
url('data:image/svg+xml,'),
radial-gradient(circle at 20% 80%, rgba(135, 206, 235, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
background-size: 400% 400%, 50px 43.4px, 20px 20px, 40px 40px, 80px 80px, 100% 100%, 100% 100%, 100% 100%;
background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
animation: gradientShift 15s ease infinite, patternFloat 20s linear infinite, dotsFloat 25s linear infinite, gridFloat 30s linear infinite, circlesFloat 35s linear infinite;
position: relative;
overflow: hidden;
min-height: 100vh;
z-index: 1;
}
/* Animated geometric shapes */
.our-products-modern::before {
content: '';
position: absolute;
top: 10%;
right: 5%;
width: 200px;
height: 200px;
background: linear-gradient(45deg, rgba(135, 206, 235, 0.2), rgba(102, 126, 234, 0.2));
border-radius: 50%;
transform: rotate(45deg);
animation: floatShape 12s ease-in-out infinite;
z-index: 2;
}
.our-products-modern::after {
content: '';
position: absolute;
bottom: 15%;
left: 8%;
width: 150px;
height: 150px;
background: linear-gradient(135deg, rgba(118, 75, 162, 0.2), rgba(135, 206, 235, 0.2));
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation: floatShape 15s ease-in-out infinite reverse;
z-index: 2;
}
/* Floating particles */
.bg-particle {
position: absolute;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: particleFloat 8s ease-in-out infinite;
z-index: 3;
}
.bg-particle:nth-child(1) { width: 8px; height: 8px; top: 20%; left: 15%; animation-delay: 0s; }
.bg-particle:nth-child(2) { width: 12px; height: 12px; top: 60%; right: 20%; animation-delay: 2s; }
.bg-particle:nth-child(3) { width: 6px; height: 6px; bottom: 30%; left: 25%; animation-delay: 4s; }
.bg-particle:nth-child(4) { width: 10px; height: 10px; top: 40%; right: 35%; animation-delay: 6s; }
/* Floating shapes */
.floating-shape {
position: absolute;
opacity: 0.2;
animation: shapeFloat 18s ease-in-out infinite;
z-index: 3;
}
.floating-shape:nth-child(1) {
top: 25%;
right: 10%;
width: 80px;
height: 80px;
background: linear-gradient(45deg, #667eea, #87CEEB);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation-delay: 0s;
opacity: 0.3;
}
.floating-shape:nth-child(2) {
bottom: 20%;
left: 15%;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #764ba2, #667eea);
border-radius: 50%;
animation-delay: 3s;
opacity: 0.3;
}
.floating-shape:nth-child(3) {
top: 70%;
right: 25%;
width: 100px;
height: 100px;
background: linear-gradient(90deg, #87CEEB, #764ba2);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
animation-delay: 6s;
opacity: 0.3;
}
.floating-shape:nth-child(4) {
top: 15%;
left: 10%;
width: 70px;
height: 70px;
background: linear-gradient(45deg, #87CEEB, #667eea);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation-delay: 9s;
opacity: 0.3;
}
.floating-shape:nth-child(5) {
bottom: 25%;
right: 15%;
width: 90px;
height: 90px;
background: linear-gradient(135deg, #764ba2, #87CEEB);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
animation-delay: 12s;
opacity: 0.3;
}
/* Enhanced animations */
@keyframes patternFloat {
0%, 100% { background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0; }
50% { background-position: 100% 100%, 25px 21.7px, 10px 10px, 0 0, 0 0, 0 0; }
}
@keyframes dotsFloat {
0%, 100% { background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0; }
50% { background-position: 100% 100%, 0 0, 10px 10px, 0 0, 0 0, 0 0; }
}
@keyframes particleFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
}
@keyframes shapeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
33% { transform: translateY(-15px) rotate(120deg) scale(1.1); }
66% { transform: translateY(10px) rotate(240deg) scale(0.9); }
}
@keyframes floatShape {
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
50% { transform: translateY(-30px) rotate(180deg) scale(1.2); }
}
/* Enhanced floating elements with more variety */
.floating-shape:nth-child(4) {
top: 15%;
left: 10%;
width: 70px;
height: 70px;
background: linear-gradient(45deg, #87CEEB, #667eea);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
animation-delay: 9s;
}
.floating-shape:nth-child(5) {
bottom: 25%;
right: 15%;
width: 90px;
height: 90px;
background: linear-gradient(135deg, #764ba2, #87CEEB);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
animation-delay: 12s;
}
/* Additional animations */
@keyframes gridFloat {
0%, 100% { background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
50% { background-position: 100% 100%, 0 0, 0 0, 20px 20px, 0 0, 0 0, 0 0, 0 0; }
}
@keyframes circlesFloat {
0%, 100% { background-position: 0% 0%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
50% { background-position: 100% 100%, 0 0, 0 0, 0 0, 40px 40px, 0 0, 0 0, 0 0; }
}
/* Product Categories Tabs */
.product-categories-tabs {
margin-bottom: 50px;
}
.category-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
}
.category-tab {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: var(--primary-color);
padding: 12px 25px;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.category-tab::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.category-tab:hover::before {
left: 100%;
}
.category-tab:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.category-tab.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* Product Stats Section */
.product-stats-section {
margin-top: 80px;
padding: 60px 0;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-item {
text-align: center;
padding: 30px 20px;
position: relative;
transition: all 0.3s ease;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondery-color));
border-radius: 2px;
opacity: 0;
transition: all 0.3s ease;
}
.stat-item:hover::before {
opacity: 1;
width: 80px;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondery-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
overflow: hidden;
}
.stat-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
}
.stat-item:hover .stat-icon::before {
transform: rotate(45deg) translate(50%, 50%);
}
.stat-icon i {
font-size: 32px;
color: white;
z-index: 2;
position: relative;
}
.stat-content h3 {
font-size: 36px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stat-content p {
font-size: 14px;
color: var(--text-color);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
/* Enhanced Product Cards */
.product-card {
position: relative;
overflow: hidden;
border-radius: 20px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s ease;
transform-style: preserve-3d;
perspective: 1000px;
}
.product-card:hover {
transform: translateY(-10px) rotateX(5deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: var(--primary-color);
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.product-card:hover::before {
opacity: 1;
}
.product-icon {
position: relative;
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondery-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
transition: all 0.3s ease;
overflow: hidden;
}
.product-icon::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--primary-color), var(--secondery-color), var(--primary-color));
border-radius: 50%;
z-index: -1;
animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.product-card:hover .product-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.product-icon i {
font-size: 32px;
color: white;
transition: all 0.3s ease;
}
.product-card:hover .product-icon i {
transform: scale(1.2);
}
.product-content {
text-align: center;
padding: 0 20px 30px;
position: relative;
z-index: 2;
}
.product-content h4 {
font-size: 20px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 15px;
transition: all 0.3s ease;
}
.product-card:hover .product-content h4 {
color: var(--secondery-color);
}
.product-specs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 15px;
}
.spec {
background: rgba(255, 255, 255, 0.1);
color: var(--text-color);
padding: 4px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.product-card:hover .spec {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.product-content p {
font-size: 14px;
color: var(--text-color);
line-height: 1.6;
margin: 0;
opacity: 0.8;
transition: all 0.3s ease;
}
.product-card:hover .product-content p {
opacity: 1;
color: var(--text-color);
}
/* Responsive Design */
@media (max-width: 768px) {
.category-tabs {
gap: 10px;
}
.category-tab {
padding: 10px 20px;
font-size: 12px;
}
.stat-item {
padding: 20px 15px;
}
.stat-icon {
width: 60px;
height: 60px;
}
.stat-icon i {
font-size: 24px;
}
.stat-content h3 {
font-size: 28px;
}
.stat-content p {
font-size: 12px;
}
}
@media (max-width: 480px) {
.category-tabs {
flex-direction: column;
align-items: center;
}
.category-tab {
width: 200px;
}
.product-stats-section {
margin-top: 50px;
padding: 40px 0;
}
.stat-item {
margin-bottom: 30px;
}
}
/* Products Page Hero Section */
.products-hero-section {
position: relative;
overflow: hidden;
}
.products-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
z-index: 1;
}
.products-hero-section .container {
position: relative;
z-index: 2;
}
.hero-stats {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-card {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin-bottom: 20px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.stat-number {
font-size: 36px;
font-weight: 700;
color: #ffd700;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.stat-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.4;
}
/* Products Grid Section */
.products-grid-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
/* Enhanced Product Cards for Products Page */
.products-grid-section .product-card {
background: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: none;
transition: all 0.4s ease;
}
.products-grid-section .product-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}
.products-grid-section .product-icon {
background: linear-gradient(135deg, var(--primary-color), var(--secondery-color));
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.products-grid-section .product-content h4 {
color: var(--primary-color);
}
.products-grid-section .spec {
background: var(--primary-color);
color: white;
border: none;
}
/* Responsive Design for Products Page */
@media (max-width: 768px) {
.hero-stats {
padding: 30px 20px;
}
.stat-card {
padding: 15px;
}
.stat-number {
font-size: 28px;
}
.stat-label {
font-size: 11px;
}
}
@media (max-width: 480px) {
.products-hero-section {
padding: 60px 0;
}
.hero-stats {
margin-top: 30px;
}
.stat-card {
margin-bottom: 15px;
}
}
/* Manufacturing Products Honeycomb Layout */
.manufacturing-hex-grid {
position: relative;
padding: 80px 0;
background: var(--secondery-color);
overflow: hidden;
}
.manufacturing-hex-container {
position: relative;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.manufacturing-hex-grid .section-title {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.manufacturing-hex-grid .section-title h3 {
color: var(--primary-color);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
position: relative;
}
.manufacturing-hex-grid .section-title h3::before {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
}
.manufacturing-hex-grid .section-title h2 {
font-size: 48px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 20px;
line-height: 1.2;
}
.manufacturing-hex-grid .section-title p {
font-size: 18px;
color: var(--text-color);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Honeycomb Layout Container */
.manufacturing-hex-grid-layout {
position: relative;
float: left;
width: 100%;
min-height: 600px;
height: 600px;
left: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
}
/* Individual Hexagon Items */
.manufacturing-hex-item {
position: relative;
margin: 10px;
width: 200px;
height: 230px;
transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 1em/.5em;
background: #1a1718;
cursor: pointer;
transform-origin: center;
will-change: transform;
}
.manufacturing-hex-item:hover {
transform: translateY(-70px) scale(1.6);
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 120px 240px rgba(0, 0, 0, 0.9);
z-index: 10;
filter: brightness(1.5);
}
.manufacturing-hex-item:nth-child(even) {
background: #233f88;
top: 115px;
}
.manufacturing-hex-item:nth-child(even):hover {
transform: translateY(-75px) scale(1.65);
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 140px 280px rgba(35, 63, 136, 1);
z-index: 10;
filter: brightness(1.6);
}
.manufacturing-hex-item:nth-child(3n) {
background: var(--accent-color);
top: 0;
}
.manufacturing-hex-item:nth-child(3n):hover {
transform: translateY(-72px) scale(1.62);
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 130px 260px rgba(255, 193, 7, 0.9);
z-index: 10;
filter: brightness(1.55);
}
/* Hexagon Shape with Pseudo Elements */
.manufacturing-hex-item:before,
.manufacturing-hex-item:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.manufacturing-hex-item:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.manufacturing-hex-item:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
/* Hover Border Effect */
.hoverborder {
opacity: 0;
background: url(/images/dotted-hexa.png) left top no-repeat;
width: 209px;
z-index: 9;
left: -48px;
top: 11px;
height: 179px;
transition: 0.5s;
position: absolute;
}
.manufacturing-hex-item:hover .hoverborder {
opacity: 1;
}
/* Product Title */
.tekst {
position: absolute;
z-index: 1;
font-weight: 600;
justify-content: center;
display: block;
text-align: center;
transition: 0.5s;
padding-top: 45px;
height: 100%;
width: 100%;
opacity: 1;
color: #fff;
font-size: 16px;
line-height: 1.2;
text-transform: uppercase;
}
.manufacturing-hex-item .tekst {
color: #fff;
}
.manufacturing-hex-item:nth-child(even) .tekst {
color: #fff;
}
.manufacturing-hex-item:nth-child(3n) .tekst {
color: #000;
}
/* Product Icon */
.tekst i {
width: auto;
margin-bottom: 10px;
display: block;
font-size: 30px;
margin-bottom: 10px;
display: block;
}
.manufacturing-hex-item .tekst i {
color: #fff;
}
.manufacturing-hex-item:nth-child(even) .tekst i {
color: #fff;
}
.manufacturing-hex-item:nth-child(3n) .tekst i {
color: #000;
}
/* Product Description */
.content {
position: absolute;
z-index: 1;
justify-content: center;
display: flex;
font-size: 13px;
text-align: center;
align-items: center;
transition: 0.5s;
height: 100%;
width: 100%;
opacity: 0;
line-height: 1.4;
}
.manufacturing-hex-item .content {
color: #fff;
}
.manufacturing-hex-item:nth-child(even) .content {
color: #fff;
}
.manufacturing-hex-item:nth-child(3n) .content {
color: #000;
}
/* Hover Effects */
.manufacturing-hex-item:hover .tekst {
opacity: 0;
transform: translateY(-10px);
transition: all 0.5s ease;
}
.manufacturing-hex-item:hover .content {
opacity: 1;
transform: translateY(0);
transition: all 0.5s ease;
}
/* Enhanced hover effects for all hexagon types */
.manufacturing-hex-item:hover {
transform: translateY(-25px) scale(1.15);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 10;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
filter: brightness(1.2);
}
.manufacturing-hex-item:hover .hoverborder {
border-color: #667eea;
box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
transform: scale(1.05);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.manufacturing-hex-item:hover .tekst i {
transform: scale(1.2) rotate(5deg);
transition: all 0.5s ease;
}
.manufacturing-hex-item:hover .manufacturing-badge {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
transition: all 0.5s ease;
}
/* Additional hover animations for better visual feedback */
.manufacturing-hex-item {
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.manufacturing-hex-item:hover {
z-index: 10;
}
/* Hover effects for different hexagon types */
.manufacturing-hex-item:nth-child(even):hover {
transform: translateY(-30px) scale(1.18);
box-shadow: 0 50px 100px rgba(35, 63, 136, 0.6);
filter: brightness(1.3);
}
.manufacturing-hex-item:nth-child(3n):hover {
transform: translateY(-28px) scale(1.16);
box-shadow: 0 45px 90px rgba(255, 193, 7, 0.5);
filter: brightness(1.25);
}
/* Icon animation on hover */
.manufacturing-hex-item:hover .tekst i {
transform: scale(1.8) rotate(20deg);
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Content reveal animation */
.manufacturing-hex-item .content {
transform: translateY(20px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.manufacturing-hex-item:hover .content {
transform: translateY(0);
opacity: 1;
}
/* Badge animation */
.manufacturing-hex-item .manufacturing-badge {
transition: all 0.4s ease;
}
.manufacturing-hex-item:hover .manufacturing-badge {
transform: scale(1.3);
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.6);
transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Product Badge */
.manufacturing-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 3px 6px;
border-radius: 10px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
transition: all 0.4s ease;
z-index: 3;
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.manufacturing-hex-item:hover .manufacturing-badge {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}
/* Hexagonal Shape */
.manufacturing-hex-shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
border: 2px solid transparent;
transition: all 0.6s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.manufacturing-hex-item:hover .manufacturing-hex-shape {
border-color: var(--accent-color);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
transform: scale(1.05);
}
/* Glowing Border Effect */
.manufacturing-hex-shape::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #667eea, #764ba2, #87CEEB, #5bc0de);
background-size: 400% 400%;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
z-index: -1;
opacity: 0;
transition: opacity 0.6s ease;
animation: manufacturingGradientShift 4s ease infinite;
}
.manufacturing-hex-item:hover .manufacturing-hex-shape::before {
opacity: 1;
}
@keyframes manufacturingGradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Product Icon */
.manufacturing-hex-icon {
position: absolute;
top: 25px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 70px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
z-index: 2;
}
.manufacturing-hex-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
border-radius: 50%;
transform: translateX(-100%);
transition: transform 0.8s ease;
}
.manufacturing-hex-item:hover .manufacturing-hex-icon::before {
transform: translateX(100%);
}
.manufacturing-hex-item:hover .manufacturing-hex-icon {
transform: translateX(-50%) scale(1.2) translateZ(20px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
background: linear-gradient(135deg, #87CEEB, #5bc0de);
}
.manufacturing-hex-icon i {
font-size: 28px;
color: #ffffff;
transition: all 0.6s ease;
z-index: 2;
position: relative;
}
.manufacturing-hex-item:hover .manufacturing-hex-icon i {
transform: scale(1.1) rotate(-10deg);
animation: manufacturingIconPulse 2s ease-in-out infinite;
}
@keyframes manufacturingIconPulse {
0%, 100% { transform: scale(1.1) rotate(-10deg); }
50% { transform: scale(1.2) rotate(-15deg); }
}
/* Product Content */
.manufacturing-hex-content {
position: absolute;
bottom: 30px;
left: 15px;
right: 15px;
text-align: center;
z-index: 2;
max-height: 120px;
overflow: hidden;
}
.manufacturing-hex-content h4 {
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 12px;
transition: all 0.6s ease;
text-shadow: 0 0 10px rgba(102, 126, 234, 0);
line-height: 1.2;
position: relative;
}
.manufacturing-hex-item:hover .manufacturing-hex-content h4 {
text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
transform: translateZ(15px);
}
.manufacturing-hex-specs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-bottom: 12px;
max-height: 60px;
overflow: hidden;
}
.manufacturing-hex-spec {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
color: var(--primary-color);
padding: 4px 8px;
border-radius: 15px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
border: 1px solid rgba(102, 126, 234, 0.2);
transition: all 0.4s ease;
animation: manufacturingSpecPulse 4s ease-in-out infinite;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.manufacturing-hex-item:hover .manufacturing-hex-spec {
animation: manufacturingSpecPulse 1s ease-in-out infinite;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border-color: var(--accent-color);
transform: scale(1.05);
}
@keyframes manufacturingSpecPulse {
0%, 100% {
box-shadow: 0 0 0 rgba(102, 126, 234, 0.3);
}
50% {
box-shadow: 0 0 15px rgba(102, 126, 234, 0.6);
}
}
.manufacturing-hex-content p {
font-size: 12px;
color: var(--text-color);
line-height: 1.4;
margin: 0;
transition: all 0.6s ease;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.manufacturing-hex-item:hover .manufacturing-hex-content p {
transform: translateZ(10px);
}
/* Manufacturing Badge */
.manufacturing-badge {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 3px 6px;
border-radius: 10px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
transition: all 0.4s ease;
z-index: 3;
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.manufacturing-hex-item:hover .manufacturing-badge {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}
/* Floating Particles */
.manufacturing-particle {
position: absolute;
width: 4px;
height: 4px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 50%;
opacity: 0.6;
animation: manufacturingParticleFloat 8s ease-in-out infinite;
}
.manufacturing-particle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.manufacturing-particle:nth-child(2) { top: 60%; right: 20%; animation-delay: 2s; }
.manufacturing-particle:nth-child(3) { bottom: 30%; left: 25%; animation-delay: 4s; }
.manufacturing-particle:nth-child(4) { top: 40%; right: 35%; animation-delay: 6s; }
@keyframes manufacturingParticleFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}
/* Responsive Design */
@media (max-width: 1200px) {
.manufacturing-hex-grid-layout {
gap: 15px;
}
.manufacturing-hex-item {
width: 260px;
height: 300px;
}
}
@media (max-width: 768px) {
.manufacturing-hex-grid-layout {
gap: 15px;
margin-top: 40px;
}
.manufacturing-hex-item {
width: 220px;
height: 260px;
margin: 8px;
}
.manufacturing-hex-icon {
width: 60px;
height: 60px;
top: 20px;
}
.manufacturing-hex-icon i {
font-size: 24px;
}
.manufacturing-hex-content {
bottom: 25px;
left: 12px;
right: 12px;
max-height: 100px;
}
.manufacturing-hex-content h4 {
font-size: 16px;
margin-bottom: 8px;
}
.manufacturing-hex-specs {
gap: 4px;
margin-bottom: 8px;
max-height: 50px;
}
.manufacturing-hex-spec {
font-size: 9px;
padding: 3px 6px;
}
.manufacturing-hex-content p {
font-size: 11px;
line-height: 1.3;
-webkit-line-clamp: 2;
}
.manufacturing-badge {
top: 10px;
right: 10px;
font-size: 8px;
padding: 2px 5px;
max-width: 50px;
}
}
@media (max-width: 480px) {
.manufacturing-hex-grid .section-title h2 {
font-size: 36px;
}
.manufacturing-hex-grid .section-title p {
font-size: 16px;
}
.manufacturing-hex-item {
width: 220px;
height: 260px;
}
.manufacturing-hex-icon {
width: 60px;
height: 60px;
top: 20px;
}
.manufacturing-hex-icon i {
font-size: 28px;
}
.manufacturing-hex-content {
bottom: 30px;
left: 15px;
right: 15px;
}
}
/* Focus Effects */
.manufacturing-hex-grid-layout:hover .manufacturing-hex-item:not(:hover) {
transform: scale(0.95);
opacity: 0.7;
transition: all 0.4s ease;
}
.manufacturing-hex-grid-layout:hover .manufacturing-hex-item:not(:hover) .manufacturing-hex-icon {
transform: translateX(-50%) scale(0.9);
opacity: 0.6;
}
.manufacturing-hex-grid-layout:hover .manufacturing-hex-item:not(:hover) .manufacturing-hex-content h4 {
transform: translateZ(0px);
opacity: 0.8;
}
/* Loading Animation */
.manufacturing-hex-item {
animation: manufacturingHexAppear 0.8s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.manufacturing-hex-item:nth-child(1) { animation-delay: 0.1s; }
.manufacturing-hex-item:nth-child(2) { animation-delay: 0.2s; }
.manufacturing-hex-item:nth-child(3) { animation-delay: 0.3s; }
.manufacturing-hex-item:nth-child(4) { animation-delay: 0.4s; }
.manufacturing-hex-item:nth-child(5) { animation-delay: 0.5s; }
.manufacturing-hex-item:nth-child(6) { animation-delay: 0.6s; }
@keyframes manufacturingHexAppear {
to {
opacity: 1;
transform: translateY(0px);
}
}
/* Touch Interactions for Mobile */
.manufacturing-hex-item.touch-active {
transform: scale(0.95) !important;
transition: transform 0.2s ease !important;
}
.manufacturing-hex-item.touch-active .manufacturing-hex-shape {
border-color: var(--accent-color) !important;
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4) !important;
}
/* Modal Styling */
.manufacturing-product-modal {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.manufacturing-product-modal > div {
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.95);
}
/* Enhanced Background Particles */
.manufacturing-bg-particle {
position: absolute;
pointer-events: none;
z-index: 1;
}
/* Manufacturing Theme Colors */
.manufacturing-hex-grid {
--manufacturing-primary: #667eea;
--manufacturing-secondary: #764ba2;
--manufacturing-accent: #87CEEB;
--manufacturing-success: #28a745;
--manufacturing-warning: #ffc107;
--manufacturing-danger: #dc3545;
}
/* Enhanced Gradient Effects */
.manufacturing-hex-shape::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(102, 126, 234, 0.05) 50%,
rgba(118, 75, 162, 0.05) 100%);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.manufacturing-hex-item:hover .manufacturing-hex-shape::after {
opacity: 1;
}
/* Manufacturing Badge Variations */
.manufacturing-badge.grs-certified {
background: linear-gradient(135deg, #28a745, #20c997);
}
.manufacturing-badge.premium {
background: linear-gradient(135deg, #ffc107, #fd7e14);
}
.manufacturing-badge.luxury {
background: linear-gradient(135deg, #6f42c1, #e83e8c);
}
.manufacturing-badge.industrial {
background: linear-gradient(135deg, #495057, #6c757d);
}
.manufacturing-badge.safety {
background: linear-gradient(135deg, #dc3545, #fd7e14);
}
.manufacturing-badge.compact {
background: linear-gradient(135deg, #17a2b8, #20c997);
}
/* Enhanced Text Effects */
.manufacturing-hex-content h4::before {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--manufacturing-primary), var(--manufacturing-secondary));
transition: width 0.6s ease;
}
.manufacturing-hex-item:hover .manufacturing-hex-content h4::before {
width: 60%;
}
/* Manufacturing Spec Badge Enhancements */
.manufacturing-hex-spec::before {
content: '\f058';
margin-right: 4px;
font-family: 'FontAwesome';
font-size: 12px;
font-weight: 900;
line-height: normal;
color: var(--manufacturing-success);
display: inline-block;
vertical-align: middle;
}
/* Product Specifications Styles */
.product-specifications {
margin: 40px 0;
padding: 30px;
background: #f8f9fa;
border-radius: 10px;
border-left: 4px solid var(--accent-color);
}
.product-specifications h3 {
margin-bottom: 25px;
color: var(--primary-color);
font-size: 24px;
font-weight: 700;
}
.spec-list {
list-style: none;
padding: 0;
margin: 0;
}
.spec-list li {
position: relative;
padding-left: 35px;
margin-bottom: 15px;
font-size: 16px;
line-height: 1.6;
color: var(--text-color);
}
.spec-list li:last-child {
margin-bottom: 0;
}
.spec-list li::before {
content: '\f058';
position: absolute;
font-family: 'FontAwesome';
font-size: 20px;
font-weight: 900;
line-height: normal;
color: var(--accent-color);
display: inline-block;
top: 2px;
left: 0;
}
.spec-list li strong {
color: var(--primary-color);
font-weight: 700;
}
/* Product Applications Styles */
.product-applications {
margin: 40px 0;
}
.product-applications h3 {
margin-bottom: 30px;
color: var(--primary-color);
font-size: 24px;
font-weight: 700;
}
.application-item {
text-align: center;
padding: 25px 15px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.application-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.app-icon {
width: 60px;
height: 60px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
transition: all 0.3s ease;
}
.app-icon i {
font-size: 24px;
color: #ffffff;
}
.application-item:hover .app-icon {
background: var(--primary-color);
transform: scale(1.1);
}
.application-item h4 {
color: var(--primary-color);
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
}
.application-item p {
color: var(--text-color);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.product-specifications {
padding: 20px;
margin: 30px 0;
}
.product-specifications h3 {
font-size: 20px;
margin-bottom: 20px;
}
.spec-list li {
font-size: 14px;
padding-left: 30px;
}
.spec-list li::before {
font-size: 18px;
}
.application-item {
padding: 20px 10px;
margin-bottom: 20px;
}
.app-icon {
width: 50px;
height: 50px;
margin-bottom: 15px;
}
.app-icon i {
font-size: 20px;
}
.application-item h4 {
font-size: 16px;
margin-bottom: 10px;
}
.application-item p {
font-size: 13px;
}
}
@media (max-width: 480px) {
.product-specifications {
padding: 15px;
margin: 20px 0;
}
.product-specifications h3 {
font-size: 18px;
margin-bottom: 15px;
}
.spec-list li {
font-size: 13px;
padding-left: 25px;
margin-bottom: 10px;
}
.spec-list li::before {
font-size: 16px;
}
.application-item {
padding: 15px 8px;
}
.app-icon {
width: 45px;
height: 45px;
margin-bottom: 12px;
}
.app-icon i {
font-size: 18px;
}
.application-item h4 {
font-size: 15px;
margin-bottom: 8px;
}
.application-item p {
font-size: 12px;
}
}
/* Enhanced Loading States */
.manufacturing-hex-item.loading {
animation: manufacturingHexLoading 1.5s ease-in-out infinite;
}
@keyframes manufacturingHexLoading {
0%, 100% {
transform: translateY(0px) scale(1);
opacity: 0.7;
}
50% {
transform: translateY(-10px) scale(1.02);
opacity: 1;
}
}
/* Manufacturing Grid Responsive Enhancements */
@media (max-width: 1200px) {
.manufacturing-hex-grid-layout {
justify-content: center;
gap: 15px;
}
}
@media (max-width: 768px) {
.manufacturing-hex-grid-layout {
gap: 10px;
margin-top: 40px;
}
.manufacturing-hex-item {
margin: 5px;
}
.manufacturing-hex-content h4 {
font-size: 16px;
}
.manufacturing-hex-specs {
gap: 6px;
}
.manufacturing-hex-spec {
font-size: 10px;
padding: 4px 8px;
}
}
@media (max-width: 480px) {
.manufacturing-hex-grid .section-title h2 {
font-size: 28px;
}
.manufacturing-hex-grid .section-title p {
font-size: 13px;
}
.manufacturing-hex-grid-layout {
gap: 8px;
margin-top: 25px;
}
.manufacturing-hex-item {
width: 180px;
height: 220px;
margin: 4px;
}
.manufacturing-hex-icon {
width: 45px;
height: 45px;
top: 12px;
}
.manufacturing-hex-icon i {
font-size: 18px;
}
.manufacturing-hex-content {
bottom: 15px;
left: 8px;
right: 8px;
max-height: 80px;
}
.manufacturing-hex-content h4 {
font-size: 12px;
margin-bottom: 5px;
line-height: 1.1;
}
.manufacturing-hex-specs {
gap: 2px;
margin-bottom: 5px;
max-height: 35px;
}
.manufacturing-hex-spec {
font-size: 7px;
padding: 2px 3px;
border-radius: 8px;
letter-spacing: 0.2px;
}
.manufacturing-hex-content p {
font-size: 9px;
line-height: 1.1;
-webkit-line-clamp: 2;
}
.manufacturing-badge {
top: 6px;
right: 6px;
font-size: 6px;
padding: 1px 3px;
max-width: 35px;
border-radius: 6px;
}
}
/* Manufacturing Grid Focus States */
.manufacturing-hex-item:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.manufacturing-hex-item:focus .manufacturing-hex-shape {
border-color: var(--manufacturing-primary);
}
/* Manufacturing Grid Accessibility */
@media (prefers-reduced-motion: reduce) {
.manufacturing-hex-item,
.manufacturing-hex-icon,
.manufacturing-hex-spec,
.manufacturing-particle {
animation: none !important;
transition: none !important;
}
}
/* Manufacturing Grid Print Styles */
@media print {
.manufacturing-hex-grid {
background: white !important;
}
.manufacturing-hex-item {
break-inside: avoid;
page-break-inside: avoid;
}
.manufacturing-particle,
.manufacturing-bg-particle {
display: none !important;
}
}
/* Responsive Styles for Honeycomb Layout */
@media only screen and (max-width: 1200px) {
.manufacturing-hex-grid-layout {
width: 90%;
left: 5%;
gap: 15px;
margin-top: 30px;
}
.manufacturing-hex-item {
width: 160px;
height: 185px;
margin: 0;
}
.manufacturing-hex-item:nth-child(even) {
top: 30px;
}
.manufacturing-hex-item:nth-child(3n) {
top: 0;
}
}
@media only screen and (max-width: 768px) {
.manufacturing-hex-grid-layout {
width: 100%;
left: 0;
min-height: 600px;
height: 600px;
gap: 12px;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.manufacturing-hex-item {
width: 140px;
height: 162px;
margin: 0;
position: relative;
top: 0 !important;
}
.manufacturing-hex-item:nth-child(even) {
top: 0 !important;
}
.manufacturing-hex-item:nth-child(3n) {
top: 0 !important;
}
.tekst {
font-size: 11px;
padding-top: 30px;
line-height: 1.2;
}
.tekst i {
font-size: 22px;
margin-bottom: 6px;
}
.content {
font-size: 10px;
padding: 0 8px;
line-height: 1.3;
}
.manufacturing-badge {
font-size: 7px;
padding: 2px 4px;
max-width: 45px;
}
}
@media only screen and (max-width: 480px) {
.manufacturing-hex-grid-layout {
width: 100%;
left: 0;
min-height: 500px;
height: auto;
gap: 8px;
margin-top: 15px;
padding: 10px;
}
.manufacturing-hex-item {
width: 110px;
height: 127px;
margin: 0;
position: relative;
top: 0 !important;
}
.manufacturing-hex-item:nth-child(even) {
top: 0 !important;
}
.manufacturing-hex-item:nth-child(3n) {
top: 0 !important;
}
.tekst {
font-size: 14px;
padding-top: 20px;
line-height: 1.1;
}
.tekst i {
font-size: 18px;
margin-bottom: 4px;
}
.content {
font-size: 13px;
padding: 0 6px;
line-height: 1.2;
}
.manufacturing-badge {
font-size: 6px;
padding: 1px 3px;
max-width: 35px;
}
}
@media only screen and (max-width: 360px) {
.manufacturing-hex-grid-layout {
gap: 6px;
padding: 8px;
}
.manufacturing-hex-item {
width: 100px;
height: 115px;
}
.tekst {
font-size: 8px;
padding-top: 18px;
}
.tekst i {
font-size: 16px;
margin-bottom: 3px;
}
.content {
font-size: 7px;
padding: 0 5px;
}
.manufacturing-badge {
font-size: 5px;
padding: 1px 2px;
max-width: 30px;
}
}
/* Modal Styles */
.manufacturing-product-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
}
.manufacturing-product-modal > div {
background: white;
padding: 40px;
border-radius: 20px;
max-width: 500px;
text-align: center;
transform: scale(0.8);
transition: transform 0.3s ease;
position: relative;
cursor: default;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
z-index: 10;
}
.modal-close-btn:hover {
background: #f0f0f0;
color: #333;
transform: scale(1.1);
}
.close-modal-btn {
margin-top: 20px;
transition: all 0.3s ease;
}
.close-modal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Modal Animation */
.manufacturing-product-modal.show {
opacity: 1;
}
.manufacturing-product-modal.show > div {
transform: scale(1);
}
/* Our Applications Section - HEXaREL Style */
.our-applications {
background: #141517 url(../images/applications_bg.webp) ;
padding: 30px 0px;
position: relative;
overflow: hidden;
}
.our-applications .section-title {
color: #fff;
text-align: center;
}
.our-applications .left {
float: left;
width: 25%;
margin-right: 2%;
}
.our-applications .right {
float: left;
width: 73%;
}
.whitebox {
background: #fff;
position: relative;
border-radius: 5px;
overflow: hidden;
transition: 0.5s;
min-height: 345px;
height: 345px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.whitebox::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 105%);
height: 100%;
width: 100%;
z-index: 1;
transition: all 0.3s ease-in-out;
opacity: 0;
transform: scale(0.8);
display: none;
}
.whitebox:hover::before {
opacity: 0;
transform: scale(0.8);
display: none;
}
.greyborder {
border: 5px solid transparent;
width: 100%;
min-height: 345px;
transition: 0.5s;
z-index: 9;
position: absolute;
}
.whitebox .imgcss {
position: absolute;
bottom: 60px;
left: 0;
z-index: 2;
transition: all 0.5s ease;
}
.whitebox .imgcss img {
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: all 0.5s ease;
filter: brightness(0.9) contrast(1.1);
}
.whitebox:hover .imgcss {
transform: translateY(-15px);
}
.whitebox:hover .imgcss img {
transform: scale(1.05);
filter: brightness(1.1) contrast(1.2);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
/* Specific styling for the first large thumbnail to match others */
.our-applications .left .whitebox .imgcss {
position: absolute;
bottom: 110px;
left: 20px;
z-index: 2;
transition: all 0.5s ease;
width: 250px;
height: 180px;
border-radius: 10%;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.our-applications .left .whitebox .imgcss img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10%;
transition: all 0.5s ease;
filter: brightness(0.9) contrast(1.1);
}
.our-applications .left .whitebox:hover .imgcss {
transform: scale(1.1) translateY(-15px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.our-applications .left .whitebox:hover .imgcss img {
transform: scale(1.1);
filter: brightness(1.1) contrast(1.2);
}
.whitebox .text {
position: absolute;
color: #233F88;
font-size: 20px;
bottom: 25px;
transition: 0.5s;
left: 20px;
line-height: 20px;
z-index: 2;
}
.whitebox .bgimg {
position: absolute;
right: 0;
top: 0;
transition: 0.5s;
z-index: 2;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
}
.whitebox .bgimg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
filter: brightness(0.8) contrast(1.1);
}
.whitebox:hover .bgimg img {
transform: scale(1.1);
filter: brightness(1) contrast(1.2);
}
.whitebox .btmshaodw {
position: absolute;
width: 100%;
transition: 0.5s;
bottom: -15px;
background: url(../images/btmshaodw-whitebox.png) left bottom repeat-x;
height: 35px;
z-index: 2;
}
.whitebox:hover .greyborder {
border: 4px solid #d1d1d1;
}
.whitebox:hover .btmshaodw {
bottom: 0px;
}
.whitebox:hover .text {
bottom: 45px;
}
.whitebox:hover .bgimg {
right: 20px;
}
.smallbox {
position: relative;
}
.smallbox .box {
width: 32%;
float: left;
margin: 0px 2% 2% 0px;
}
.smallbox .whitebox {
background: #fff;
position: relative;
border-radius: 5px;
overflow: hidden;
transition: 0.5s;
min-height: 165px;
height: 165px;
box-shadow: 0 3px 15px rgba(0,0,0,0.1);
}
.smallbox .whitebox::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 105%);
height: 100%;
width: 100%;
z-index: 1;
transition: all 0.3s ease-in-out;
opacity: 0;
transform: scale(0.8);
display: none;
}
.smallbox .whitebox:hover::before {
opacity: 0;
transform: scale(0.8);
display: none;
}
.smallbox .greyborder {
border: 4px solid transparent;
width: 100%;
min-height: 165px;
transition: 0.5s;
z-index: 999;
position: absolute;
}
.smallbox .whitebox .imgcss {
position: absolute;
transition: 0.5s;
z-index: 2;
bottom: 60px;
left: 100px;
width: 200px;
height: 160px;
border-radius: 25%;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.smallbox .whitebox .imgcss img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
filter: brightness(0.9) contrast(1.1);
}
/* Removed duplicate rule - keeping only the one below */
.smallbox .whitebox .bgimg {
position: absolute;
right: 0;
top: 0px;
left: 0;
transition: 0.5s;
display: none;
height: 100vh;
background: url(../images/small-aappli-box-bg.png) left top repeat-x;
z-index: 2;
}
.smallbox .whitebox:hover .text {
bottom: 35px;
}
.smallbox .whitebox:hover .bgimg {
top: 10px;
}
.smallbox .whitebox:hover .imgcss {
right: 0px;
bottom: 40px;
transform: scale(1.1) translateY(-15px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.smallbox .whitebox:hover .btmshaodw {
bottom: -5px;
}
/* Enhanced image loading and fallback */
.whitebox .imgcss img,
.whitebox .bgimg img {
opacity: 0;
animation: fadeInImage 0.6s ease-in-out forwards;
}
@keyframes fadeInImage {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Image error handling */
.whitebox .imgcss img:not([src]),
.whitebox .bgimg img:not([src]) {
display: none;
}
/* Responsive image improvements */
@media (max-width: 768px) {
.whitebox .imgcss img,
.smallbox .whitebox .imgcss img {
max-width: 100%;
height: auto;
}
.smallbox .whitebox .imgcss {
width: 170px;
height: 150px;
left: 80px;
bottom: 21px;
}
/* Responsive design for the first large thumbnail */
.our-applications .left .whitebox .imgcss {
width: 60px;
height: 60px;
bottom: 50px;
left: 15px;
}
}
@media (max-width: 480px) {
.our-applications .left .whitebox .imgcss {
width: 250px;
height: 150px;
bottom: 70px;
left: 10px;
}
}
/* High DPI display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.whitebox .imgcss img,
.whitebox .bgimg img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
.smallbox .nomar {
margin: 0px 0px 2% 0px;
}
/* Image loading states and improvements */
.whitebox .imgcss::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 1;
}
/* Specific loading animation for the first large thumbnail */
.our-applications .left .whitebox .imgcss::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 1;
}
.whitebox .imgcss img[src] {
position: relative;
z-index: 2;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Image hover effects enhancement */
.whitebox:hover .imgcss::before {
display: none;
}
/* Better image aspect ratio handling */
.whitebox .imgcss img {
aspect-ratio: 1;
object-position: center;
}
/* Image error state */
.whitebox .imgcss img:not([src]),
.whitebox .imgcss img[src=""],
.whitebox .imgcss img[src*="data:image/svg+xml"] {
display: none;
}
.whitebox .imgcss:not(:has(img[src]))::after {
content: '📦';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #ccc;
z-index: 1;
}
/* Specific error handling for the first large thumbnail */
.our-applications .left .whitebox .imgcss:not(:has(img[src]))::after {
content: '🚗';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: #ccc;
z-index: 1;
}
/* Hover effects for the first large thumbnail */
.our-applications .left .whitebox:hover .imgcss::before {
display: none;
}
/* Responsive Design for HEXaREL Style Applications */
@media (max-width: 768px) {
.our-applications {
padding: 80px 0;
}
.our-applications .left {
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.our-applications .right {
float: none;
width: 100%;
}
.smallbox .box {
width: 48%;
margin: 0px 1% 2% 1%;
}
.smallbox .nomar {
margin: 0px 1% 2% 1%;
}
.whitebox {
min-height: 280px;
height: 280px;
}
.greyborder {
min-height: 280px;
}
.smallbox .whitebox {
min-height: 140px;
height: 140px;
}
.smallbox .greyborder {
min-height: 140px;
}
.whitebox .text {
font-size: 22px;
bottom: 30px;
}
.smallbox .whitebox .text {
font-size: 18px;
bottom: 25px;
}
}
@media (max-width: 480px) {
.our-applications {
padding: 60px 0;
}
.smallbox .box {
width: 100%;
margin: 0px 0px 20px 0px;
}
.smallbox .nomar {
margin: 0px 0px 20px 0px;
}
.whitebox {
min-height: 250px;
height: 250px;
}
.greyborder {
min-height: 250px;
}
.smallbox .whitebox {
min-height: 120px;
height: 150px;
}
.smallbox .greyborder {
min-height: 120px;
}
.whitebox .text {
font-size: 18px;
bottom: 25px;
}
.smallbox .whitebox .text {
font-size: 16px;
bottom: 20px;
}
}
/* Animation for HEXaREL Style Applications */
@keyframes whiteboxAppear {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.whitebox {
animation: whiteboxAppear 0.6s ease forwards;
}
.whitebox:nth-child(1) { animation-delay: 0.1s; }
.whitebox:nth-child(2) { animation-delay: 0.2s; }
.whitebox:nth-child(3) { animation-delay: 0.3s; }
.whitebox:nth-child(4) { animation-delay: 0.4s; }
.whitebox:nth-child(5) { animation-delay: 0.5s; }
.whitebox:nth-child(6) { animation-delay: 0.6s; }
.whitebox:nth-child(7) { animation-delay: 0.7s; }
/* Enhanced Products Section - Matching Template Style */
.products-section {
background: var(--secondery-color);
padding: 40px 0;
position: relative;
overflow: hidden;
background-image: url(../images/products_bg.webp);
}
.products-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
pointer-events: none;
}
.products-section .section-title {
font-size: 52px;
font-weight: 700;
color: var(--primary-color);
text-align: center;
margin-bottom: 25px;
line-height: 1.1;
position: relative;
z-index: 2;
}
.products-section .section-title h3 {
font-size: 18px;
font-weight: 600;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
}
.products-section .section-title h2 {
font-size: 52px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 30px;
line-height: 1.1;
}
.products-section .title-border {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
margin: 0 auto 40px;
border-radius: 2px;
position: relative;
}
.products-section .title-border::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 3px;
opacity: 0.3;
z-index: -1;
}
.products-section .section-title p {
font-size: 18px;
color: var(--text-color);
text-align: center;
line-height: 1.7;
max-width: 900px;
margin: 0 auto 80px;
font-weight: 400;
opacity: 0.9;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 40px;
margin-bottom: 80px;
position: relative;
z-index: 2;
align-items: stretch;
}
/* Unified product title color */
.product-color-red,
.product-color-gold,
.product-color-silver,
.product-color-blue,
.product-color-purple,
.product-color-green {
color: var(--primary-color);
}
/* Enhanced Project Cards */
.project-item {
background: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
}
.project-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.project-featured-image {
position: relative;
overflow: hidden;
height: 280px;
}
.project-featured-image figure {
height: 100%;
margin: 0;
}
.project-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.project-item:hover .project-featured-image img {
transform: scale(1.05);
}
.hover-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 10;
padding: 30px;
text-align: center;
backdrop-filter: blur(5px);
overflow-y: auto;
max-height: 100%;
}
.project-item:hover .hover-content {
opacity: 1;
}
.hover-content h4 {
color: var(--primary-color);
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-height: 2.4em; /* 2 lines of text */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hover-content h4::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 1px;
}
.hover-content ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
max-height: 60%;
overflow-y: auto;
}
.hover-content ul li {
color: var(--text-color);
font-size: 16px;
line-height: 1.6;
margin-bottom: 12px;
font-weight: 500;
position: relative;
padding-left: 20px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
.hover-content ul li::before {
content: '•';
position: absolute;
left: 0;
color: var(--accent-color);
font-weight: bold;
font-size: 18px;
}
.hover-content ul li:last-child {
margin-bottom: 0;
}
/* Enhanced Project Content Styles */
.products-section .project-content {
padding: 35px 30px;
background: #ffffff;
position: relative !important;
left: auto !important;
bottom: auto !important;
right: auto !important;
border-top: 1px solid rgba(0, 0, 0, 0.05);
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 0;
overflow: hidden;
z-index: 1;
}
.products-section .project-content h3 {
font-size: 26px !important;
font-weight: 700 !important;
margin-bottom: 18px !important;
line-height: 1.2 !important;
position: relative;
color: var(--text-color) !important;
text-transform: none !important;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-height: 3.6em; /* 2 lines of text with line-height 1.2 */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
flex-shrink: 0;
}
.project-content h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 1px;
}
.products-section .project-content h2 {
font-size: 17px !important;
line-height: 1.7 !important;
color: var(--text-color) !important;
margin: 0 !important;
opacity: 0.85 !important;
font-weight: 400 !important;
text-transform: none !important;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
max-height: 5.1em; /* 3 lines of text with line-height 1.7 */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
flex: 1;
min-height: 0;
}
/* Enhanced Project Button */
.products-section .project-btn {
position: absolute;
top: 30px;
right: 30px;
z-index: 5;
transition: all 0.3s ease;
pointer-events: none;
}
.products-section .project-btn a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
pointer-events: auto;
}
.products-section .project-btn a:hover {
background: var(--primary-color);
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.products-section .project-btn img {
width: 20px;
height: 20px;
transition: all 0.3s ease;
}
.products-section .project-btn a:hover img {
filter: brightness(0) invert(1);
}
/* Enhanced CTA Section */
.products-section .btn-default {
margin: 0 10px;
padding: 15px 35px;
font-size: 16px;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.products-section .btn-default::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.products-section .btn-default:hover::before {
left: 100%;
}
.products-section .btn-highlighted {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #ffffff;
border: none;
}
.products-section .btn-highlighted:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
/* Responsive Design */
@media (max-width: 1200px) {
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
}
@media (max-width: 768px) {
.products-section {
padding: 60px 0;
}
.products-section .section-title {
font-size: 36px;
}
.products-section .section-description {
font-size: 16px;
margin-bottom: 40px;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 480px) {
.products-section .section-title {
font-size: 28px;
}
.products-section .section-title h2 {
font-size: 36px;
}
.products-section .section-title h3 {
font-size: 16px;
letter-spacing: 1px;
}
.products-section .section-title p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 60px;
}
.products-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.project-item {
margin-bottom: 20px;
}
.project-featured-image {
height: 220px;
}
.project-content {
padding: 25px 20px;
}
.project-content h3 {
font-size: 22px;
margin-bottom: 15px;
max-height: 2.6em;
-webkit-line-clamp: 2;
}
.project-content h2 {
font-size: 15px;
line-height: 1.6;
max-height: 4.8em; /* 3 lines with line-height 1.6 */
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
.hover-content {
padding: 20px;
}
.hover-content h4 {
font-size: 18px;
margin-bottom: 15px;
max-height: 2.2em;
-webkit-line-clamp: 2;
}
.hover-content ul li {
font-size: 14px;
margin-bottom: 10px;
padding-left: 15px;
line-height: 1.4;
}
.hover-content ul {
max-height: 50%;
}
.project-btn {
top: 20px;
right: 20px;
}
.project-btn a {
width: 45px;
height: 45px;
}
.project-btn img {
width: 18px;
height: 18px;
}
.products-section .btn-default {
padding: 12px 25px;
font-size: 14px;
margin: 5px;
}
.products-section .text-center {
margin-top: 60px;
}
}
/* Enhanced Clients Section Styling */
.our-testimonials {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
padding-top: 40px;
}
.our-testimonials::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
z-index: 1;
}
.our-testimonials .container {
position: relative;
z-index: 2;
}
.our-testimonials .section-title p {
font-size: 18px;
line-height: 1.7;
color: var(--text-color);
opacity: 0.8;
max-width: 800px;
margin: 0 auto 60px;
}
/* Enhanced Client Logo Grid */
.clients-logo-grid {
margin-top: 60px;
margin-bottom: 80px;
}
.client-logo-item {
text-align: center;
padding: 40px 20px;
margin-bottom: 30px;
transition: all 0.3s ease;
border-radius: 20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.client-logo-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
opacity: 0;
transition: all 0.4s ease;
z-index: 1;
}
.client-logo-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: rgba(var(--primary-color-rgb), 0.3);
}
.client-logo-item:hover::before {
opacity: 1;
}
.client-logo {
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.client-logo img {
max-width: 120px;
max-height: 60px;
object-fit: contain;
filter: grayscale(100%) brightness(0.7);
transition: all 0.4s ease;
opacity: 0.7;
}
.client-logo-item:hover .client-logo img {
filter: grayscale(0%) brightness(1);
transform: scale(1.1);
opacity: 1;
}
.client-name {
position: relative;
z-index: 2;
}
.client-name h4 {
color: var(--text-color);
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
text-transform: none;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.client-category {
display: block;
font-size: 14px;
color: var(--accent-color);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.8;
transition: all 0.3s ease;
}
.client-logo-item:hover .client-name h4 {
color: var(--primary-color);
}
.client-logo-item:hover .client-category {
color: var(--primary-color);
opacity: 1;
}
/* Client Overlay */
.client-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.9) 0%, rgba(var(--accent-color-rgb), 0.9) 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.9);
transition: all 0.3s ease;
z-index: 3;
}
.client-logo-item:hover .client-overlay {
opacity: 1;
transform: scale(1);
}
.overlay-content {
text-align: center;
color: white;
padding: 20px;
}
.overlay-content i {
font-size: 32px;
margin-bottom: 15px;
display: block;
opacity: 0.9;
}
.overlay-content p {
font-size: 16px;
font-weight: 500;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Client Stats Section */
.client-stats-section {
margin-top: 80px;
padding: 60px 0;
background: rgba(255, 255, 255, 0.8);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.stat-item {
text-align: center;
padding: 30px 20px;
transition: all 0.3s ease;
position: relative;
}
.stat-item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1) 0%, rgba(var(--accent-color-rgb), 0.1) 100%);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.3s ease;
z-index: 1;
}
.stat-item:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
}
.stat-icon {
position: relative;
z-index: 2;
margin-bottom: 20px;
}
.stat-icon i {
font-size: 48px;
color: var(--primary-color);
transition: all 0.3s ease;
}
.stat-item:hover .stat-icon i {
transform: scale(1.1);
color: var(--accent-color);
}
.stat-content {
position: relative;
z-index: 2;
}
.stat-content h3 {
font-size: 36px;
font-weight: 700;
color: var(--text-color);
margin: 0 0 10px 0;
transition: all 0.3s ease;
}
.stat-item:hover .stat-content h3 {
color: var(--primary-color);
transform: scale(1.05);
}
.stat-content p {
font-size: 16px;
color: var(--text-color);
opacity: 0.8;
margin: 0;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.stat-item:hover .stat-content p {
color: var(--accent-color);
opacity: 1;
}
/* Responsive Design */
@media (max-width: 1200px) {
.client-logo-item {
padding: 30px 15px;
}
.client-logo img {
max-width: 100px;
max-height: 50px;
}
.client-name h4 {
font-size: 16px;
}
.client-category {
font-size: 12px;
}
}
@media (max-width: 768px) {
.our-testimonials .section-title p {
font-size: 16px;
margin-bottom: 40px;
}
.clients-logo-grid {
margin-top: 40px;
margin-bottom: 60px;
}
.client-logo-item {
padding: 25px 15px;
margin-bottom: 20px;
}
.client-logo img {
max-width: 80px;
max-height: 40px;
}
.client-name h4 {
font-size: 14px;
}
.client-category {
font-size: 11px;
}
.client-stats-section {
margin-top: 60px;
padding: 40px 0;
}
.stat-item {
padding: 20px 15px;
margin-bottom: 20px;
}
.stat-icon i {
font-size: 36px;
}
.stat-content h3 {
font-size: 28px;
}
.stat-content p {
font-size: 14px;
}
}
@media (max-width: 480px) {
.our-testimonials .section-title p {
font-size: 15px;
margin-bottom: 30px;
}
.clients-logo-grid {
margin-top: 30px;
margin-bottom: 40px;
}
.client-logo-item {
padding: 20px 10px;
margin-bottom: 15px;
border-radius: 15px;
}
.client-logo img {
max-width: 60px;
max-height: 30px;
}
.client-name h4 {
font-size: 13px;
}
.client-category {
font-size: 10px;
}
.overlay-content i {
font-size: 24px;
}
.overlay-content p {
font-size: 14px;
}
.client-stats-section {
margin-top: 40px;
padding: 30px 0;
border-radius: 20px;
}
.stat-item {
padding: 15px 10px;
}
.stat-icon i {
font-size: 28px;
}
.stat-content h3 {
font-size: 24px;
}
.stat-content p {
font-size: 12px;
}
}
/* Animation Enhancements - Disabled for Performance */
/*
@keyframes clientCardFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.client-logo-item {
animation: clientCardFloat 6s ease-in-out infinite;
}
.client-logo-item:nth-child(2) {
animation-delay: 0.5s;
}
.client-logo-item:nth-child(3) {
animation-delay: 1s;
}
.client-logo-item:nth-child(4) {
animation-delay: 1.5s;
}
.client-logo-item:nth-child(5) {
animation-delay: 2s;
}
.client-logo-item:nth-child(6) {
animation-delay: 2.5s;
}
.client-logo-item:nth-child(7) {
animation-delay: 3s;
}
.client-logo-item:nth-child(8) {
animation-delay: 3.5s;
}
.client-logo-item:hover {
animation: none;
}
@keyframes statCountUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stat-item {
animation: statCountUp 0.6s ease-out forwards;
opacity: 0;
}
.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }
*/
/* About Page Specific Hexagonal Shapes - Alternative Classes */
.about-hexaouter {
position: relative;
float: left;
width: 32.3%;
min-height: 430px;
height: 430px;
left: 100px;
}
.about-hex {
position: absolute;
margin: 10px;
width: 113px;
top: 0;
height: 197px;
transition: 0.5s;
border-radius: 1em/.5em;
background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(35, 63, 136, 0.3);
}
.about-hex:hover {
top: -10px;
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(35, 63, 136, 0.4);
}
.about-hex .tekst i {
transition: transform 0.3s ease;
}
.about-hex:hover .tekst i {
transform: scale(1.2) rotate(5deg);
}
.about-hex.btmmove {
background: #233f88;
top: 205px;
}
.about-hex.btmmove:hover {
top: 215px;
}
.about-hex.btmmove.center {
position: absolute;
left: 179px;
top: 102px;
}
.about-hex.btmmove.center:hover {
position: absolute;
left: 179px;
top: 102px;
}
.about-hex:before,
.about-hex:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
}
.about-hex:before {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.about-hex:after {
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.about-hex .tekst {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-size: 12px;
font-weight: 600;
z-index: 2;
line-height: 1.4;
}
.about-hex .tekst i {
font-size: 24px;
display: block;
margin-bottom: 8px;
}
.about-hex .content {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
color: #333;
padding: 15px;
text-align: center;
font-size: 12px;
line-height: 1.4;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.about-hex:hover .content {
opacity: 1;
visibility: visible;
top: calc(100% + 10px);
}
/* Alternative How We Work Section for About Page */
.about-how-we-work {
background-color: #f8f9fa;
padding: 80px 0;
}
.about-how-we-work-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.about-how-we-work-item {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-left: 4px solid #233F88;
}
.about-how-we-work-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(35, 63, 136, 0.2);
}
.about-how-we-work-item .icon-box {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #233F88 0%, #4A90E2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.about-how-we-work-item .icon-box img {
width: 30px;
height: 30px;
filter: brightness(0) invert(1);
}
.about-how-we-work-content h3 {
color: #233F88;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
}
.about-how-we-work-content p {
color: #666;
line-height: 1.6;
margin-bottom: 0;
}