.brands_logo .barnds img , .footer-logo img , .off-canvas-logo img {
width: 160px;
}
/* .footer-logo img {
width: 175px;
} */
.text-justify{
text-align: justify;
}
.about-list-wrap ul li i {
color: #148255;
}
.hero-area-wrapper .hero-slider:before {
background: linear-gradient(90deg, var(--bg3-color) 47.64%, rgb(182 250 191 / 50%) 68.71%, rgb(37 166 54 / 50%) 99.86%);
}
.banner_green_layer {
position: relative;
/* text-align: center; */
}
.banner_green_layer h1,ul,li {
position: relative;
z-index: 2; /* Above overlay */
}
.banner_green_layer .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: linear-gradient(90deg, var(--bg3-color) 47.64%, rgb(182 250 191 / 50%) 68.71%, rgb(37 166 54 / 50%) 99.86%); */
background: linear-gradient(11deg, var(--bg3-color) 25.00%, rgb(182 250 191 / 45%) 56.71%, rgb(45 232 70 / 65%) 102.86%);
z-index: 1; /* Behind the text */
border-radius: inherit; /* Optional if your card has rounded corners */
}
.hero-single {
padding: 100px 0 100px 0;
}
.hero_single_banner .title{
font-size: 66px;
font-weight: 800;
}
.hero_single_banner .text{
font-size: 25px;
font-weight: 800;
}
.socials-links a {
color: #148255;
}
.bread-content .breadcumb-title {
font-size: 64px;
font-weight: 800;
}
.bread-content .breadcumb-menu li a {
color: black;
}
/* Enhanced Core Services Section */
.future-area-wrapper {
background: linear-gradient(135deg, rgba(55, 127, 75, 0.02) 0%, rgba(20, 130, 85, 0.02) 100%);
position: relative;
overflow: hidden;
}
.future-area-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(55, 127, 75, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(55, 127, 75, 0.02) 0%, transparent 50%);
pointer-events: none;
animation: servicesFloat 15s ease-in-out infinite;
}
@keyframes servicesFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-8px) rotate(0.5deg); }
66% { transform: translateY(8px) rotate(-0.5deg); }
}
.future-card-wrap {
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 20px;
overflow: hidden;
}
.future-card-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(55, 127, 75, 0.1), rgba(20, 130, 85, 0.1));
opacity: 0;
transition: all 0.4s ease;
z-index: 1;
border-radius: 20px;
}
.future-card-wrap:hover::before {
opacity: 1;
}
.future-card {
position: relative;
text-align: center;
border-radius: 20px;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 5px 15px rgba(55, 127, 75, 0.1);
}
.future-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 25px 50px rgba(55, 127, 75, 0.15),
0 10px 25px rgba(0, 0, 0, 0.1);
}
.future-card h5 {
position: relative;
z-index: 3;
font-size: 2.2rem;
font-weight: 800;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 0;
transition: all 0.4s ease;
letter-spacing: 2px;
}
.future-card-wrap:hover .future-card h5 {
transform: scale(1.1);
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}
.future-card .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.7) 0%,
rgba(20, 130, 85, 0.6) 50%,
rgba(32, 201, 151, 0.5) 100%);
z-index: 2;
border-radius: 20px;
transition: all 0.4s ease;
}
.future-card-wrap:hover .future-card .overlay {
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.8) 0%,
rgba(20, 130, 85, 0.7) 50%,
rgba(32, 201, 151, 0.6) 100%);
}
/* Enhanced section header */
.future-area-wrapper .section-header {
position: relative;
z-index: 2;
}
.future-area-wrapper .section-header .sub-title {
color: #377f4b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
font-size: 14px;
position: relative;
display: inline-block;
}
.future-area-wrapper .section-header .sub-title::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
width: 15px;
height: 2px;
background: linear-gradient(90deg, #377f4b, #148255);
transform: translateY(-50%);
}
.future-area-wrapper .section-header .sub-title::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
width: 15px;
height: 2px;
background: linear-gradient(90deg, #148255, #377f4b);
transform: translateY(-50%);
}
.future-area-wrapper .section-header .title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 25px;
color: #377f4b;
line-height: 1.3;
padding: 0 30px;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: center;
display: block;
width: 100%;
box-sizing: border-box;
overflow: visible;
text-overflow: clip;
white-space: normal;
}
@keyframes titleGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.future-area-wrapper .section-header .text {
font-size: 1.2rem;
color: #6c757d;
max-width: 700px;
margin: 0 auto;
line-height: 1.8;
font-weight: 400;
padding: 0 20px;
}
.future-area-wrapper .section-header {
position: relative;
z-index: 2;
padding: 0 30px;
margin-bottom: 60px;
width: 100%;
box-sizing: border-box;
}
.future-area-wrapper .container {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
/* Enhanced button area */
.future-icon-area {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 0 0 20px 20px;
border-top: 1px solid rgba(55, 127, 75, 0.1);
transition: all 0.4s ease;
}
.future-card-wrap:hover .future-icon-area {
background: rgba(255, 255, 255, 0.98);
border-top-color: rgba(55, 127, 75, 0.2);
transform: translateY(-5px);
}
.future-btn .button-one {
background: linear-gradient(135deg, #377f4b, #148255);
border: none;
color: white;
font-weight: 600;
letter-spacing: 1px;
padding: 12px 25px;
border-radius: 25px;
transition: all 0.4s ease;
box-shadow: 0 5px 15px rgba(55, 127, 75, 0.3);
position: relative;
overflow: hidden;
}
.future-btn .button-one::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;
}
.future-btn .button-one:hover::before {
left: 100%;
}
.future-btn .button-one:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(55, 127, 75, 0.4);
background: linear-gradient(135deg, #148255, #377f4b);
}
.future-btn .button-one i {
transition: all 0.3s ease;
margin-left: 8px;
}
.future-btn .button-one:hover i {
transform: translateX(5px);
}
/* View More Button Styling */
.services-view-more {
margin-top: 40px;
position: relative;
z-index: 2;
}
.services-view-more .button-two {
background: linear-gradient(135deg, #377f4b, #148255);
color: white;
font-weight: 600;
letter-spacing: 1px;
padding: 18px 40px;
border-radius: 50px;
border: 2px solid transparent;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px rgba(55, 127, 75, 0.3);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
line-height: 1;
}
.services-view-more .button-two::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.services-view-more .button-two:hover::before {
left: 100%;
}
.services-view-more .button-two:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(55, 127, 75, 0.4);
background: linear-gradient(135deg, #148255, #377f4b);
border-color: rgba(255, 255, 255, 0.2);
}
.services-view-more .button-two i {
color: white;
font-size: 16px;
margin-left: 5px;
}
/* Enhanced About Section */
.about-us-area {
position: relative;
overflow: hidden;
}
.about-us-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(55, 127, 75, 0.05) 0%, rgba(20, 130, 85, 0.03) 100%);
z-index: 1;
}
.about-us-area .container {
position: relative;
z-index: 2;
}
.about-card-box {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 25px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(55, 127, 75, 0.1);
border: 1px solid rgba(55, 127, 75, 0.1);
overflow: hidden;
position: relative;
display: flex;
align-items: stretch;
min-height: 600px;
}
.about-card-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #377f4b, #148255, #20c997, #377f4b);
background-size: 200% 100%;
animation: aboutGradient 4s ease-in-out infinite;
}
@keyframes aboutGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.about-content {
padding: 60px 50px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.about-content .sub-title {
color: #377f4b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
font-size: 14px;
position: relative;
display: inline-block;
}
.about-content .sub-title::before {
content: '';
position: absolute;
left: -15px;
top: 50%;
width: 10px;
height: 2px;
background: linear-gradient(90deg, #377f4b, #148255);
transform: translateY(-50%);
}
.about-content .title {
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 25px;
color: #2c3e50;
line-height: 1.2;
background: linear-gradient(135deg, #377f4b, #148255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-content .text {
font-size: 1.1rem;
color: #6c757d;
line-height: 1.8;
margin-bottom: 30px;
font-weight: 400;
}
.about-list-wrap {
margin-bottom: 40px;
}
.about-list-wrap ul {
list-style: none;
padding: 0;
margin: 0;
}
.about-list-wrap ul li {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
padding: 20px 25px;
background: rgba(55, 127, 75, 0.05);
border-radius: 15px;
border-left: 4px solid #377f4b;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
gap: 20px;
}
.about-list-wrap ul li::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(55, 127, 75, 0.1), transparent);
transition: left 0.6s ease;
}
.about-list-wrap ul li:hover::before {
left: 100%;
}
.about-list-wrap ul li:hover {
transform: translateX(10px) translateY(-2px);
background: rgba(55, 127, 75, 0.08);
box-shadow: 0 8px 25px rgba(55, 127, 75, 0.15);
}
.about-list-wrap ul li i {
color: #377f4b;
font-size: 20px;
width: 45px;
height: 45px;
background: rgba(55, 127, 75, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.about-list-wrap ul li:hover i {
background: linear-gradient(135deg, #377f4b, #148255);
color: white;
transform: scale(1.1) rotate(5deg);
box-shadow: 0 5px 15px rgba(55, 127, 75, 0.3);
}
.about-list-wrap ul li .list-content {
flex: 1;
position: relative;
z-index: 1;
}
.about-list-wrap ul li .list-content h5 {
font-size: 18px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 8px;
transition: all 0.3s ease;
}
.about-list-wrap ul li:hover .list-content h5 {
color: #377f4b;
}
.about-list-wrap ul li .list-content p {
font-size: 14px;
color: #6c757d;
line-height: 1.6;
margin: 0;
transition: all 0.3s ease;
}
.about-list-wrap ul li:hover .list-content p {
color: #495057;
}
/* Experience Badge */
.experience-badge {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 10;
}
.badge-content {
background: linear-gradient(135deg, #377f4b, #148255);
color: white;
padding: 20px;
border-radius: 50%;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 10px 30px rgba(55, 127, 75, 0.3);
animation: badgePulse 3s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.badge-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: badgeShine 4s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes badgeShine {
0% { transform: translateX(-100%) translateY(-100%); }
100% { transform: translateX(100%) translateY(100%); }
}
.badge-content .years {
font-size: 24px;
font-weight: 900;
line-height: 1;
margin-bottom: 5px;
}
.badge-content .text {
font-size: 10px;
font-weight: 600;
line-height: 1.2;
opacity: 0.9;
}
.about-btn .button-one {
background: linear-gradient(135deg, #377f4b, #148255);
color: white;
font-weight: 600;
letter-spacing: 1px;
padding: 15px 35px;
border-radius: 30px;
border: none;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(55, 127, 75, 0.3);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 10px;
}
.about-btn .button-one::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;
}
.about-btn .button-one:hover::before {
left: 100%;
}
.about-btn .button-one:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(55, 127, 75, 0.4);
background: linear-gradient(135deg, #148255, #377f4b);
}
.about-btn .button-one i {
transition: all 0.3s ease;
}
.about-btn .button-one:hover i {
transform: translateX(5px);
}
.about-img {
position: relative;
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.about-img .img-hover-wrapper {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
position: relative;
}
.about-img .img-hover-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(55, 127, 75, 0.2), rgba(20, 130, 85, 0.1));
opacity: 0;
transition: all 0.4s ease;
z-index: 1;
}
.about-img .img-hover-wrapper:hover::before {
opacity: 1;
}
.about-img .img-hover-wrapper img {
transition: all 0.6s ease;
width: 100%;
height: auto;
}
.about-img .img-hover-wrapper:hover img {
transform: scale(1.05);
}
/* Enhanced Mission Section */
.skills-area-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}
.skills-area-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(55, 127, 75, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(55, 127, 75, 0.08) 0%, transparent 50%);
pointer-events: none;
animation: missionFloat 20s ease-in-out infinite;
}
@keyframes missionFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
.skills-area-section .container {
position: relative;
z-index: 2;
}
.skills-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border-radius: 25px;
padding: 60px 50px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 10px 20px rgba(55, 127, 75, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.skills-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #377f4b, #148255, #20c997, #377f4b);
background-size: 200% 100%;
animation: missionGradient 4s ease-in-out infinite;
}
@keyframes missionGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.skills-content .sub-title {
color: #377f4b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 20px;
font-size: 14px;
position: relative;
display: inline-block;
}
.skills-content .sub-title::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
width: 15px;
height: 2px;
background: linear-gradient(90deg, #377f4b, #148255);
transform: translateY(-50%);
}
.skills-content .sub-title::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
width: 15px;
height: 2px;
background: linear-gradient(90deg, #148255, #377f4b);
transform: translateY(-50%);
}
.skills-content .title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 25px;
color: #2c3e50;
line-height: 1.2;
background: linear-gradient(135deg, #377f4b, #148255, #20c997);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: missionTitleGradient 4s ease-in-out infinite;
}
@keyframes missionTitleGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.skills-content .text {
font-size: 1.2rem;
color: #6c757d;
line-height: 1.8;
margin-bottom: 40px;
font-weight: 400;
}
.skills-box {
background: linear-gradient(135deg, rgba(55, 127, 75, 0.1), rgba(20, 130, 85, 0.1));
border-radius: 20px;
padding: 40px 30px;
text-align: center;
border: 1px solid rgba(55, 127, 75, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.skills-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(55, 127, 75, 0.15), rgba(20, 130, 85, 0.15));
opacity: 0;
transition: all 0.4s ease;
}
.skills-box:hover::before {
opacity: 1;
}
.skills-box:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(55, 127, 75, 0.2);
border-color: rgba(55, 127, 75, 0.4);
}
.skill-icon {
position: relative;
z-index: 2;
margin-bottom: 25px;
}
.skill-icon img {
width: 60px;
height: 60px;
transition: all 0.4s ease;
filter: drop-shadow(0 5px 15px rgba(55, 127, 75, 0.3));
}
.skills-box:hover .skill-icon img {
transform: scale(1.2) rotate(5deg);
filter: drop-shadow(0 8px 20px rgba(55, 127, 75, 0.4));
}
.counter-number {
position: relative;
z-index: 2;
margin-bottom: 15px;
}
.counter-timer {
font-size: 3.5rem;
font-weight: 900;
color: #377f4b;
line-height: 1;
background: linear-gradient(135deg, #377f4b, #148255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.skills-box:hover .counter-timer {
transform: scale(1.1);
}
.counter-symble {
font-size: 2.5rem;
font-weight: 700;
color: #377f4b;
margin-left: 5px;
}
.skills-box small {
color: #2c3e50;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
position: relative;
z-index: 2;
}
.skills-bg-img {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-size: cover !important;
background-position: center !important;
opacity: 0.1;
z-index: 1;
}
/* Enhanced Creative Team Section */
.team-area-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.team-area-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, rgba(55, 127, 75, 0.08) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(55, 127, 75, 0.06) 0%, transparent 50%);
pointer-events: none;
animation: teamFloat 18s ease-in-out infinite;
}
@keyframes teamFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-8px) rotate(0.5deg); }
66% { transform: translateY(8px) rotate(-0.5deg); }
}
.team-area-section .container {
position: relative;
z-index: 2;
}
.team-title {
margin-bottom: 60px;
}
.team-title .sub-title {
color: #377f4b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 20px;
font-size: 14px;
position: relative;
display: inline-block;
}
.team-title .sub-title::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
width: 15px;
height: 2px;
background: linear-gradient(90deg, #377f4b, #148255);
transform: translateY(-50%);
}
.team-title .sub-title::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
width: 15px;
height: 2px;
background: linear-gradient(90deg, #148255, #377f4b);
transform: translateY(-50%);
}
.team-title .title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 25px;
color: #2c3e50;
line-height: 1.2;
background: linear-gradient(135deg, #377f4b, #148255, #20c997);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: teamTitleGradient 4s ease-in-out infinite;
}
@keyframes teamTitleGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.team-card-wrap {
background-size: cover !important;
background-position: center !important;
border-radius: 25px;
overflow: hidden;
position: relative;
height: 400px;
margin-bottom: 30px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 10px 20px rgba(55, 127, 75, 0.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.8) 0%,
rgba(20, 130, 85, 0.7) 50%,
rgba(32, 201, 151, 0.6) 100%);
opacity: 0;
transition: all 0.4s ease;
z-index: 1;
}
.team-card-wrap:hover::before {
opacity: 1;
}
.team-card-wrap:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 30px 60px rgba(55, 127, 75, 0.2),
0 15px 30px rgba(0, 0, 0, 0.1);
}
.team-social-links {
position: absolute;
top: 20px;
right: 20px;
z-index: 3;
opacity: 0;
transform: translateY(-20px);
transition: all 0.4s ease;
}
.team-card-wrap:hover .team-social-links {
opacity: 1;
transform: translateY(0);
}
.team-social-links ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 10px;
}
.team-social-links ul li a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #377f4b;
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.team-social-links ul li a:hover {
background: #377f4b;
color: white;
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(55, 127, 75, 0.3);
}
.team-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
padding: 30px 25px;
transform: translateY(100%);
transition: all 0.4s ease;
z-index: 2;
}
.team-card-wrap:hover .team-text {
transform: translateY(0);
}
.team-designation {
color: #377f4b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
margin-bottom: 8px;
position: relative;
}
.team-designation::before {
content: '';
position: absolute;
left: 0;
bottom: -5px;
width: 30px;
height: 2px;
background: linear-gradient(90deg, #377f4b, #148255);
transition: width 0.3s ease;
}
.team-card-wrap:hover .team-designation::before {
width: 50px;
}
.team-name {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 0;
}
.team-name a {
color: inherit;
text-decoration: none;
transition: all 0.3s ease;
}
.team-name a:hover {
color: #377f4b;
}
/* Floating service elements */
.future-area-wrapper::after {
content: '';
position: absolute;
top: 15%;
right: 5%;
width: 8px;
height: 8px;
background: rgba(55, 127, 75, 0.4);
border-radius: 50%;
animation: serviceParticle 10s ease-in-out infinite;
}
.future-area-wrapper .floating-element-1 {
position: absolute;
top: 25%;
left: 3%;
width: 6px;
height: 6px;
background: rgba(55, 127, 75, 0.3);
border-radius: 50%;
animation: serviceParticle 12s ease-in-out infinite reverse;
}
.future-area-wrapper .floating-element-2 {
position: absolute;
bottom: 20%;
right: 8%;
width: 4px;
height: 4px;
background: rgba(55, 127, 75, 0.2);
border-radius: 50%;
animation: serviceParticle 8s ease-in-out infinite;
}
@keyframes serviceParticle {
0%, 100% {
transform: translateY(0px) translateX(0px) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-15px) translateX(8px) scale(1.2);
opacity: 0.6;
}
50% {
transform: translateY(-8px) translateX(-12px) scale(0.8);
opacity: 0.4;
}
75% {
transform: translateY(12px) translateX(4px) scale(1.1);
opacity: 0.5;
}
}
/* Responsive design for services */
@media (max-width: 768px) {
.future-area-wrapper .section-header .title {
font-size: 2.5rem;
line-height: 1.4;
padding: 0 20px;
}
.future-area-wrapper .section-header {
padding: 0 20px;
}
.future-card h5 {
font-size: 1.8rem;
}
.future-card-wrap:hover .future-card {
transform: translateY(-5px) scale(1.01);
}
.future-btn .button-one {
padding: 10px 20px;
font-size: 14px;
}
.services-view-more .button-two {
padding: 15px 30px;
font-size: 14px;
gap: 10px;
}
.services-view-more .button-two i {
font-size: 14px;
}
}
@media (max-width: 576px) {
.future-area-wrapper .section-header .title {
font-size: 2rem;
line-height: 1.5;
padding: 0 15px;
}
.future-area-wrapper .section-header {
padding: 0 15px;
}
.future-area-wrapper .section-header .sub-title {
font-size: 12px;
letter-spacing: 2px;
}
.future-card h5 {
font-size: 1.5rem;
letter-spacing: 1px;
}
.future-card-wrap:hover .future-card {
transform: translateY(-3px) scale(1.005);
}
.future-btn .button-one {
padding: 8px 16px;
font-size: 13px;
}
.services-view-more .button-two {
padding: 12px 25px;
font-size: 13px;
gap: 8px;
}
.services-view-more .button-two i {
font-size: 13px;
}
/* About Section Responsive */
.about-content {
padding: 40px 30px;
}
.about-content .title {
font-size: 2.2rem;
}
.about-list-wrap ul li {
padding: 12px 15px;
margin-bottom: 15px;
}
.about-img {
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.services-view-more .button-two {
padding: 12px 25px;
font-size: 13px;
gap: 8px;
}
.services-view-more .button-two i {
font-size: 13px;
}
/* About Section Mobile */
.about-content {
padding: 30px 20px;
}
.about-content .title {
font-size: 1.8rem;
line-height: 1.3;
}
.about-content .text {
font-size: 1rem;
}
.about-list-wrap ul li {
padding: 10px 12px;
margin-bottom: 12px;
font-size: 14px;
}
.about-list-wrap ul li i {
width: 25px;
height: 25px;
font-size: 14px;
margin-right: 12px;
}
.about-img {
padding: 20px 15px;
}
.about-btn .button-one {
padding: 12px 25px;
font-size: 14px;
}
/* Mission Section Responsive */
.skills-content {
padding: 40px 30px;
}
.skills-content .title {
font-size: 2.5rem;
}
.skills-box {
padding: 30px 20px;
}
.counter-timer {
font-size: 3rem;
}
.skill-icon img {
width: 50px;
height: 50px;
}
}
@media (max-width: 576px) {
.services-view-more .button-two {
padding: 12px 25px;
font-size: 13px;
gap: 8px;
}
.services-view-more .button-two i {
font-size: 13px;
}
/* About Section Mobile */
.about-content {
padding: 30px 20px;
}
.about-content .title {
font-size: 1.8rem;
line-height: 1.3;
}
.about-content .text {
font-size: 1rem;
}
.about-list-wrap ul li {
padding: 10px 12px;
margin-bottom: 12px;
font-size: 14px;
}
.about-list-wrap ul li i {
width: 25px;
height: 25px;
font-size: 14px;
margin-right: 12px;
}
.about-img {
padding: 20px 15px;
}
.about-btn .button-one {
padding: 12px 25px;
font-size: 14px;
}
/* Mission Section Mobile */
.skills-content {
padding: 30px 20px;
}
.skills-content .title {
font-size: 2rem;
line-height: 1.3;
}
.skills-content .text {
font-size: 1rem;
}
.skills-box {
padding: 25px 15px;
}
.counter-timer {
font-size: 2.5rem;
}
.counter-symble {
font-size: 2rem;
}
.skill-icon img {
width: 45px;
height: 45px;
}
.skills-box small {
font-size: 12px;
}
/* Team Section Responsive */
.team-title .title {
font-size: 2.5rem;
}
.team-card-wrap {
height: 350px;
}
.team-text {
padding: 25px 20px;
}
.team-name {
font-size: 1.3rem;
}
}
@media (max-width: 576px) {
.services-view-more .button-two {
padding: 12px 25px;
font-size: 13px;
gap: 8px;
}
.services-view-more .button-two i {
font-size: 13px;
}
/* About Section Mobile */
.about-content {
padding: 30px 20px;
}
.about-content .title {
font-size: 1.8rem;
line-height: 1.3;
}
.about-content .text {
font-size: 1rem;
}
.about-list-wrap ul li {
padding: 10px 12px;
margin-bottom: 12px;
font-size: 14px;
}
.about-list-wrap ul li i {
width: 25px;
height: 25px;
font-size: 14px;
margin-right: 12px;
}
.about-img {
padding: 20px 15px;
}
.about-btn .button-one {
padding: 12px 25px;
font-size: 14px;
}
/* Mission Section Mobile */
.skills-content {
padding: 30px 20px;
}
.skills-content .title {
font-size: 2rem;
line-height: 1.3;
}
.skills-content .text {
font-size: 1rem;
}
.skills-box {
padding: 25px 15px;
}
.counter-timer {
font-size: 2.5rem;
}
.counter-symble {
font-size: 2rem;
}
.skill-icon img {
width: 45px;
height: 45px;
}
.skills-box small {
font-size: 12px;
}
/* Team Section Mobile */
.team-title .title {
font-size: 2rem;
line-height: 1.3;
}
.team-card-wrap {
height: 300px;
margin-bottom: 20px;
}
.team-text {
padding: 20px 15px;
}
.team-name {
font-size: 1.2rem;
}
.team-designation {
font-size: 11px;
}
.team-social-links ul li a {
width: 35px;
height: 35px;
}
}
.team-card-wrap:hover::after {
background: linear-gradient(90deg, rgba(141, 237, 165, 0.56) 6.43%, rgba(60, 219, 92, 0) 73%);
}
.project-content-area::before {
background: linear-gradient(90deg, #1a8827ad 58.77%, rgba(0, 0, 0, 0.00) 100%);
}
.team-card-wrap {
filter: none;
}
/* Image hover green shade and zoom ============================================== */
.img-hover-wrapper {
position: relative;
/* display: inline-block; */
overflow: hidden;
}
.img-hover-wrapper img {
display: block;
transition: transform 0.8s ease;
}
.img-hover-wrapper:hover img {
transform: scale(1.05);
}
.img-hover-wrapper::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(141, 237, 165, 0.56) 6.43%, rgba(60, 219, 92, 0) 73%);
opacity: 0;
transition: all 0.2s ease-in-out;
pointer-events: none;
}
.img-hover-wrapper:hover::after {
left: 0;
opacity: 1;
}
/* ====================================== form email */
input[type="email"] {
color: var(--bs-body-color);
}
.newsletter input[type="email"] {
color: white;
}
.acuda-stroke-title-two span {
color: #1482551c;
}
.footer_section .text{
color: #c7c8ca;
}
.footer_section ul li a {
color: #c7c8ca;
}
/* ================================== contact page */
.contact-item-icon i {
color: #148255;
font-size: 30px;
}
.contact_two_images .experience-img img {
height: unset;
width: unset;
}
.contact_two_images .contact-item {
background: unset;
}
.contact_two_images .experience-img {
top: 60% !important;
}
.small_phone_icon{
font-size: 23px !important
}
/* ============================ media query */
@media (max-width: 992px) {
.home-two-menubar .das-menu-toggle {
background: #f6f6f6;
color: #0d7d48;
}
.hero-area-wrapper .hero-slider:before {
background: linear-gradient(155deg, var(--bg3-color) 47.64%, rgb(182 250 191 / 50%) 68.71%, rgb(37 166 54 / 50%) 99.86%);
}
.brands_logo .barnds img , .footer-logo img , .off-canvas-logo img, .mobile-logo img {
width: 139px;
min-width: unset;
}
}
@media (max-width: 450px) {
.bread-content .breadcumb-title {
word-break: normal;
font-size: 48px;
}
}
@media (max-width: 767px) {
.home-two-blog-area .recent-post-thumb-wrap .thumb img {
height: auto;
}
}
/* ===========================whatsapp button */
.whatsapp-float {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999;
cursor: pointer;
}
.whatsapp-float img {
width: 50px;
height: 50px;
}
/* ================================= expertise_details */
.expertise_details .sub-title {
font-size: 18px;
}
/* ================================= For Mobile */
.mob_get_btn{
padding: 21px 50px 22px 50px !important;
}
.blog_title{
font-size: 16px;
line-height: 25px;
}
/* Hero Welcome Text Color - Logo Color */
.hero-single .sub-title {
color: #377f4b !important;
font-weight: 600;
}
/* Enhanced Statistics Section - Modern Design */
.hero-stats-section {
background: transparent;
padding: 120px 0;
position: relative;
overflow: hidden;
}
.stats-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(55, 127, 75, 0.08) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(55, 127, 75, 0.06) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(55, 127, 75, 0.04) 0%, transparent 60%);
pointer-events: none;
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
/* Floating particles effect */
.hero-stats-section::before {
content: '';
position: absolute;
top: 10%;
left: 5%;
width: 4px;
height: 4px;
background: rgba(55, 127, 75, 0.3);
border-radius: 50%;
animation: floatParticle 8s ease-in-out infinite;
}
.hero-stats-section::after {
content: '';
position: absolute;
top: 60%;
right: 10%;
width: 6px;
height: 6px;
background: rgba(55, 127, 75, 0.2);
border-radius: 50%;
animation: floatParticle 12s ease-in-out infinite reverse;
}
@keyframes floatParticle {
0%, 100% {
transform: translateY(0px) translateX(0px) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-20px) translateX(10px) scale(1.2);
opacity: 0.6;
}
50% {
transform: translateY(-10px) translateX(-15px) scale(0.8);
opacity: 0.4;
}
75% {
transform: translateY(15px) translateX(5px) scale(1.1);
opacity: 0.5;
}
}
.stats-header {
margin-bottom: 60px;
}
.stats-header .sub-title {
color: #377f4b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
font-size: 14px;
}
.stats-header .title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #2c3e50;
background: linear-gradient(135deg, #377f4b, #148255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stats-header .text {
font-size: 1.1rem;
color: #6c757d;
max-width: 600px;
margin: 0 auto;
}
.stat-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 25px;
padding: 0;
text-align: center;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(55, 127, 75, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 1px solid rgba(55, 127, 75, 0.1);
height: 100%;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #377f4b, #148255, #20c997, #377f4b);
background-size: 200% 100%;
transform: scaleX(0);
transition: transform 0.4s ease;
animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-card:hover {
transform: translateY(-20px) scale(1.02);
box-shadow:
0 30px 60px rgba(55, 127, 75, 0.15),
0 15px 30px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border-color: rgba(55, 127, 75, 0.2);
}
.stat-card::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(55, 127, 75, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s ease;
z-index: 0;
}
.stat-card:hover::after {
width: 300px;
height: 300px;
}
.stat-card-inner {
padding: 40px 30px;
position: relative;
z-index: 1;
}
.stat-icon-wrapper {
position: relative;
margin-bottom: 30px;
display: inline-block;
}
.stat-icon {
font-size: 3.5rem;
color: #377f4b;
margin-bottom: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
filter: drop-shadow(0 4px 8px rgba(55, 127, 75, 0.2));
}
.icon-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background: linear-gradient(135deg, rgba(55, 127, 75, 0.08), rgba(20, 130, 85, 0.08));
border-radius: 50%;
z-index: 1;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(55, 127, 75, 0.1);
}
.stat-card:hover .icon-bg {
background: linear-gradient(135deg, rgba(55, 127, 75, 0.15), rgba(20, 130, 85, 0.15));
transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
border-color: rgba(55, 127, 75, 0.3);
box-shadow: 0 10px 30px rgba(55, 127, 75, 0.2);
}
.stat-card:hover .stat-icon {
transform: scale(1.15) rotate(-5deg);
color: #148255;
filter: drop-shadow(0 8px 16px rgba(55, 127, 75, 0.3));
}
.stat-content {
margin-bottom: 20px;
}
.stat-number {
font-size: 4rem;
font-weight: 900;
color: #377f4b;
margin-bottom: 15px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1;
background: linear-gradient(135deg, #377f4b, #148255, #20c997);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 2px 4px rgba(55, 127, 75, 0.1));
animation: gradientFlow 4s ease-in-out infinite;
}
@keyframes gradientFlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.stat-card:hover .stat-number {
transform: scale(1.08);
filter: drop-shadow(0 4px 8px rgba(55, 127, 75, 0.2));
animation: gradientFlow 2s ease-in-out infinite;
}
.stat-label {
font-size: 1.2rem;
color: #2c3e50;
font-weight: 600;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-description {
font-size: 0.9rem;
color: #6c757d;
font-style: italic;
margin-bottom: 0;
}
.stat-progress {
width: 100%;
height: 6px;
background: rgba(55, 127, 75, 0.08);
border-radius: 3px;
overflow: hidden;
margin-top: 25px;
position: relative;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #377f4b, #148255, #20c997, #377f4b);
background-size: 200% 100%;
border-radius: 3px;
transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
animation: progressGradient 3s ease-in-out infinite;
}
@keyframes progressGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 1.5s infinite;
border-radius: 3px;
}
.progress-bar::before {
content: '';
position: absolute;
top: -2px;
right: -2px;
width: 10px;
height: 10px;
background: #377f4b;
border-radius: 50%;
box-shadow: 0 0 10px rgba(55, 127, 75, 0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Responsive Design for Stats */
@media (max-width: 768px) {
.hero-stats-section {
padding: 100px 0;
}
.stats-header .title {
font-size: 2.2rem;
}
.stat-card-inner {
padding: 35px 25px;
}
.stat-number {
font-size: 3.2rem;
}
.stat-icon {
font-size: 3rem;
}
.icon-bg {
width: 75px;
height: 75px;
}
.stat-card:hover {
transform: translateY(-15px) scale(1.01);
}
}
@media (max-width: 576px) {
.hero-stats-section {
padding: 80px 0;
}
.stats-header .title {
font-size: 2rem;
}
.stat-card-inner {
padding: 30px 20px;
}
.stat-number {
font-size: 2.8rem;
}
.stat-label {
font-size: 1.1rem;
}
.stat-icon {
font-size: 2.8rem;
}
.icon-bg {
width: 65px;
height: 65px;
}
.stat-card:hover {
transform: translateY(-10px) scale(1.005);
}
}
/* Animation for stats on scroll */
.stat-card.animate {
animation: slideInUp 0.6s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced counter animation */
.stat-number.animated {
animation: countUp 1s ease-out;
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Enhanced Get In Touch Section */
.get-in-touch-area {
background: linear-gradient(135deg, rgba(55, 127, 75, 0.05) 0%, rgba(20, 130, 85, 0.03) 100%);
position: relative;
overflow: hidden;
}
.contact-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, rgba(55, 127, 75, 0.08) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(20, 130, 85, 0.06) 0%, transparent 50%),
linear-gradient(45deg, transparent 48%, rgba(55, 127, 75, 0.03) 50%, transparent 52%);
background-size: 300px 300px, 200px 200px, 60px 60px;
animation: contactPattern 20s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes contactPattern {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-100px) translateY(-50px); }
}
.get-in-touch-area .container {
position: relative;
z-index: 2;
}
.contact-form-card, .contact-info-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
padding: 40px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(55, 127, 75, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.contact-form-card::before, .contact-info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.05) 0%,
rgba(20, 130, 85, 0.03) 50%,
rgba(32, 201, 151, 0.02) 100%);
opacity: 0;
transition: all 0.4s ease;
z-index: -1;
}
.contact-form-card:hover::before, .contact-info-card:hover::before {
opacity: 1;
}
.contact-form-card:hover, .contact-info-card:hover {
transform: translateY(-5px);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 12px 24px rgba(55, 127, 75, 0.15);
}
.contact-header, .contact-info-header {
margin-bottom: 30px;
}
.contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #377f4b, #148255);
border-radius: 50%;
margin-right: 15px;
color: white;
font-size: 16px;
box-shadow: 0 4px 12px rgba(55, 127, 75, 0.3);
animation: contactIconPulse 2s ease-in-out infinite;
}
@keyframes contactIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.contact-header .sub-title, .contact-info-header .sub-title {
color: #377f4b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
font-size: 14px;
display: flex;
align-items: center;
}
.contact-header .title, .contact-info-header .title {
font-size: 2.5rem;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 15px;
background: linear-gradient(135deg, #377f4b, #148255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contact-header .text, .contact-info-header .text {
color: #666;
font-size: 16px;
line-height: 1.6;
margin-bottom: 0;
}
/* Enhanced Form Styling */
.enhanced-contact-form .input-wrapper {
position: relative;
margin-bottom: 20px;
}
.input-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #377f4b;
font-size: 16px;
z-index: 2;
transition: all 0.3s ease;
}
.enhanced-contact-form input,
.enhanced-contact-form textarea,
.enhanced-contact-form select {
width: 100%;
padding: 15px 15px 15px 50px;
border: 2px solid rgba(55, 127, 75, 0.2);
border-radius: 15px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
font-size: 16px;
transition: all 0.3s ease;
position: relative;
}
.enhanced-contact-form input:focus,
.enhanced-contact-form textarea:focus,
.enhanced-contact-form select:focus {
outline: none;
border-color: #377f4b;
box-shadow: 0 0 0 3px rgba(55, 127, 75, 0.1);
background: rgba(255, 255, 255, 1);
}
.enhanced-contact-form input:focus + .input-icon,
.enhanced-contact-form textarea:focus + .input-icon {
color: #148255;
transform: translateY(-50%) scale(1.1);
}
.enhanced-contact-form textarea {
min-height: 120px;
resize: vertical;
}
/* Enhanced Submit Button */
.contact-submit-btn {
background: linear-gradient(135deg, #377f4b, #148255);
border: none;
padding: 15px 30px;
border-radius: 50px;
color: white;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 10px;
}
.contact-submit-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;
}
.contact-submit-btn:hover::before {
left: 100%;
}
.contact-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(55, 127, 75, 0.3);
}
.contact-submit-btn i {
transition: transform 0.3s ease;
}
.contact-submit-btn:hover i {
transform: translateX(5px) rotate(15deg);
}
/* Enhanced Author Section */
.author-content {
background: rgba(55, 127, 75, 0.05);
border-radius: 20px;
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(55, 127, 75, 0.1);
position: relative;
overflow: hidden;
}
.author-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(55, 127, 75, 0.02), rgba(20, 130, 85, 0.02));
opacity: 0;
transition: opacity 0.3s ease;
}
.author-content:hover::before {
opacity: 1;
}
.author-img {
position: relative;
width: 80px;
height: 80px;
margin-right: 20px;
}
.author-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 3px solid #377f4b;
}
.author-status {
position: absolute;
bottom: 5px;
right: 5px;
width: 20px;
height: 20px;
background: #28a745;
border-radius: 50%;
border: 3px solid white;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.8; }
}
.author-text h3 {
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.author-text p {
color: #377f4b;
font-weight: 600;
margin-bottom: 10px;
}
.author-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.author-badge i {
color: #ffd700;
animation: starTwinkle 1.5s ease-in-out infinite;
}
@keyframes starTwinkle {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.2) rotate(180deg); }
}
/* Contact Features */
.contact-features {
margin-bottom: 30px;
}
.feature-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
margin-bottom: 15px;
background: rgba(255, 255, 255, 0.7);
border-radius: 15px;
border: 1px solid rgba(55, 127, 75, 0.1);
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(55, 127, 75, 0.1);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #377f4b, #148255);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.feature-content h5 {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 5px;
}
.feature-content p {
font-size: 14px;
color: #666;
margin: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-form-card, .contact-info-card {
padding: 25px;
margin-bottom: 30px;
}
.contact-header .title, .contact-info-header .title {
font-size: 2rem;
}
.author-content {
flex-direction: column;
text-align: center;
}
.author-img {
margin: 0 auto 15px;
}
.feature-item {
flex-direction: column;
text-align: center;
gap: 10px;
}
}
@media (max-width: 576px) {
.contact-form-card, .contact-info-card {
padding: 20px;
}
.contact-header .title, .contact-info-header .title {
font-size: 1.8rem;
}
.contact-icon {
width: 35px;
height: 35px;
font-size: 14px;
}
.enhanced-contact-form input,
.enhanced-contact-form textarea,
.enhanced-contact-form select {
padding: 12px 12px 12px 45px;
font-size: 14px;
}
.contact-submit-btn {
padding: 12px 25px;
font-size: 14px;
}
}
/* Enhanced Blog Section */
.blog-post-area-section {
background: linear-gradient(135deg, rgba(55, 127, 75, 0.03) 0%, rgba(20, 130, 85, 0.02) 100%);
position: relative;
overflow: hidden;
}
.blog-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 30% 30%, rgba(55, 127, 75, 0.06) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(20, 130, 85, 0.04) 0%, transparent 50%),
linear-gradient(45deg, transparent 48%, rgba(55, 127, 75, 0.02) 50%, transparent 52%);
background-size: 250px 250px, 180px 180px, 50px 50px;
animation: blogPattern 25s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes blogPattern {
0% { transform: translateX(0) translateY(0) rotate(0deg); }
100% { transform: translateX(-80px) translateY(-40px) rotate(360deg); }
}
.blog-post-area-section .container {
position: relative;
z-index: 2;
}
.blog-content-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
padding: 40px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(55, 127, 75, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
height: fit-content;
}
.blog-content-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.05) 0%,
rgba(20, 130, 85, 0.03) 50%,
rgba(32, 201, 151, 0.02) 100%);
opacity: 0;
transition: all 0.4s ease;
z-index: -1;
}
.blog-content-card:hover::before {
opacity: 1;
}
.blog-content-card:hover {
transform: translateY(-5px);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 12px 24px rgba(55, 127, 75, 0.15);
}
.blog-header {
margin-bottom: 30px;
}
.blog-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #377f4b, #148255);
border-radius: 50%;
margin-right: 15px;
color: white;
font-size: 16px;
box-shadow: 0 4px 12px rgba(55, 127, 75, 0.3);
animation: blogIconPulse 2s ease-in-out infinite;
}
@keyframes blogIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.blog-header .sub-title {
color: #377f4b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
font-size: 14px;
display: flex;
align-items: center;
}
.blog-header .title {
font-size: 2.5rem;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 15px;
background: linear-gradient(135deg, #377f4b, #148255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.blog-header .text {
color: #666;
font-size: 16px;
line-height: 1.6;
margin-bottom: 0;
}
/* Blog Stats */
.blog-stats {
display: flex;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
padding: 15px;
background: rgba(55, 127, 75, 0.05);
border-radius: 15px;
border: 1px solid rgba(55, 127, 75, 0.1);
transition: all 0.3s ease;
flex: 1;
min-width: 100px;
}
.stat-item:hover {
background: rgba(55, 127, 75, 0.1);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(55, 127, 75, 0.15);
}
.stat-number {
font-size: 1.8rem;
font-weight: 800;
color: #377f4b;
margin-bottom: 5px;
background: linear-gradient(135deg, #377f4b, #148255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 12px;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Blog Buttons */
.blog-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.blog-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.blog-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;
}
.blog-btn:hover::before {
left: 100%;
}
.blog-btn i {
transition: transform 0.3s ease;
}
.blog-btn:hover i {
transform: translateX(3px);
}
/* Enhanced Blog Cards */
.enhanced-blog-card {
margin-bottom: 30px;
}
.blog-card-inner {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 5px 15px rgba(55, 127, 75, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.blog-card-inner:hover {
transform: translateY(-8px);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 10px 25px rgba(55, 127, 75, 0.15);
}
.blog-card-inner .thumb {
position: relative;
overflow: hidden;
height: 200px;
}
.blog-card-inner .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s ease;
}
.blog-card-inner:hover .thumb img {
transform: scale(1.1);
}
.blog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.8) 0%,
rgba(20, 130, 85, 0.7) 100%);
opacity: 0;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.blog-card-inner:hover .blog-overlay {
opacity: 1;
}
.overlay-content i {
color: white;
font-size: 24px;
transform: translateX(-20px);
transition: all 0.4s ease;
}
.blog-card-inner:hover .overlay-content i {
transform: translateX(0);
}
.blog-category {
position: absolute;
top: 15px;
left: 15px;
background: rgba(55, 127, 75, 0.9);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.blog-card-inner .author-deatils {
padding: 25px;
background: transparent;
}
.blog-card-inner .usersdate {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}
.blog-card-inner .usersdate a {
color: #377f4b;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.blog-card-inner .usersdate a:hover {
color: #148255;
}
.read-time {
display: flex;
align-items: center;
gap: 5px;
color: #666;
font-size: 12px;
font-weight: 600;
}
.blog-card-inner h5 {
margin-bottom: 15px;
}
.blog-card-inner h5 a {
color: #1a1a1a;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
transition: all 0.3s ease;
}
.blog-card-inner h5 a:hover {
color: #377f4b;
}
.blog-excerpt {
margin-bottom: 20px;
}
.blog-excerpt p {
color: #666;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.blog-meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid rgba(55, 127, 75, 0.1);
}
.author-info {
display: flex;
align-items: center;
gap: 10px;
}
.author-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #377f4b;
}
.author-name {
font-size: 14px;
font-weight: 600;
color: #377f4b;
}
.blog-actions {
display: flex;
gap: 10px;
}
.like-btn, .share-btn {
background: none;
border: none;
color: #666;
font-size: 14px;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
}
.like-btn:hover, .share-btn:hover {
color: #377f4b;
background: rgba(55, 127, 75, 0.1);
}
.like-btn i {
transition: all 0.3s ease;
}
.like-btn:hover i {
color: #e74c3c;
transform: scale(1.2);
}
/* Responsive Design */
@media (max-width: 768px) {
.blog-content-card {
padding: 25px;
margin-bottom: 30px;
}
.blog-header .title {
font-size: 2rem;
}
.blog-stats {
gap: 15px;
}
.stat-item {
min-width: 80px;
padding: 12px;
}
.stat-number {
font-size: 1.5rem;
}
.blog-buttons {
flex-direction: column;
}
.blog-card-inner .usersdate {
flex-direction: column;
align-items: flex-start;
}
.blog-meta {
flex-direction: column;
gap: 15px;
align-items: flex-start;
}
}
@media (max-width: 576px) {
.blog-content-card {
padding: 20px;
}
.blog-header .title {
font-size: 1.8rem;
}
.blog-icon {
width: 35px;
height: 35px;
font-size: 14px;
}
.blog-stats {
flex-direction: column;
}
.stat-item {
min-width: auto;
}
.blog-card-inner .author-deatils {
padding: 20px;
}
.blog-card-inner h5 a {
font-size: 16px;
}
}
/* Enhanced Call to Action Section */
.cta-section {
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.1) 0%,
rgba(20, 130, 85, 0.08) 25%,
rgba(32, 201, 151, 0.06) 50%,
rgba(55, 127, 75, 0.08) 75%,
rgba(20, 130, 85, 0.1) 100%);
position: relative;
overflow: hidden;
padding: 80px 0;
}
.cta-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(55, 127, 75, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(20, 130, 85, 0.08) 0%, transparent 50%),
linear-gradient(45deg, transparent 48%, rgba(55, 127, 75, 0.05) 50%, transparent 52%),
linear-gradient(-45deg, transparent 48%, rgba(32, 201, 151, 0.03) 50%, transparent 52%);
background-size: 400px 400px, 300px 300px, 80px 80px, 60px 60px;
animation: ctaPattern 30s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes ctaPattern {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-100px) translateY(-50px) rotate(360deg); }
}
.cta-floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.floating-element {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(55, 127, 75, 0.1), rgba(20, 130, 85, 0.1));
animation: float 6s ease-in-out infinite;
}
.cta-float-1 {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.cta-float-2 {
width: 120px;
height: 120px;
top: 60%;
right: 15%;
animation-delay: 2s;
}
.cta-float-3 {
width: 60px;
height: 60px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-20px) rotate(120deg); }
66% { transform: translateY(10px) rotate(240deg); }
}
.cta-section .container {
position: relative;
z-index: 3;
}
.cta-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 30px;
padding: 60px 40px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 10px 25px rgba(55, 127, 75, 0.15);
position: relative;
overflow: hidden;
}
.cta-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(55, 127, 75, 0.05) 0%,
rgba(20, 130, 85, 0.03) 50%,
rgba(32, 201, 151, 0.02) 100%);
opacity: 0;
transition: all 0.4s ease;
z-index: -1;
}
.cta-content:hover::before {
opacity: 1;
}
.cta-header {
margin-bottom: 40px;
}
.cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #377f4b, #148255);
border-radius: 50%;
margin-right: 15px;
color: white;
font-size: 20px;
box-shadow: 0 6px 20px rgba(55, 127, 75, 0.4);
animation: ctaIconPulse 2s ease-in-out infinite;
}
@keyframes ctaIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.cta-subtitle {
color: #377f4b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 20px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.cta-title {
font-size: 3.5rem;
font-weight: 900;
color: #1a1a1a;
margin-bottom: 20px;
background: linear-gradient(135deg, #377f4b, #148255, #20c997);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.cta-text {
color: #666;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto 40px;
}
/* CTA Features */
.cta-features {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.cta-feature-item {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
border: 1px solid rgba(55, 127, 75, 0.1);
transition: all 0.3s ease;
min-width: 200px;
}
.cta-feature-item:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(55, 127, 75, 0.15);
}
.cta-feature-item .feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #377f4b, #148255);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.cta-feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.cta-feature-item .feature-content h5 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 5px;
}
.cta-feature-item .feature-content p {
font-size: 14px;
color: #666;
margin: 0;
}
/* Enhanced CTA Buttons */
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.cta-primary-btn {
background: linear-gradient(135deg, #377f4b, #148255);
border: none;
padding: 18px 35px;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 12px;
box-shadow: 0 8px 25px rgba(55, 127, 75, 0.3);
}
.cta-primary-btn::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;
}
.cta-primary-btn:hover::before {
left: 100%;
}
.cta-primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(55, 127, 75, 0.4);
}
.btn-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
border-radius: 50px;
opacity: 0;
transition: opacity 0.3s ease;
}
.cta-primary-btn:hover .btn-glow {
opacity: 1;
}
.cta-primary-btn i {
transition: transform 0.3s ease;
}
.cta-primary-btn:hover i {
transform: translateX(5px) rotate(15deg);
}
.cta-secondary-btn {
background: rgba(255, 255, 255, 0.9);
border: 2px solid #377f4b;
padding: 16px 33px;
border-radius: 50px;
color: #377f4b;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 12px;
backdrop-filter: blur(10px);
}
.cta-secondary-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(55, 127, 75, 0.1), transparent);
transition: left 0.6s ease;
}
.cta-secondary-btn:hover::before {
left: 100%;
}
.cta-secondary-btn:hover {
background: #377f4b;
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(55, 127, 75, 0.3);
}
.cta-secondary-btn i {
transition: transform 0.3s ease;
}
.cta-secondary-btn:hover i {
transform: translateX(5px);
}
/* CTA Stats */
.cta-stats {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.cta-stat-item {
text-align: center;
padding: 20px;
background: rgba(55, 127, 75, 0.05);
border-radius: 20px;
border: 1px solid rgba(55, 127, 75, 0.1);
transition: all 0.3s ease;
min-width: 120px;
}
.cta-stat-item:hover {
background: rgba(55, 127, 75, 0.1);
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(55, 127, 75, 0.15);
}
.cta-stat-item .stat-number {
font-size: 2rem;
font-weight: 900;
color: #377f4b;
margin-bottom: 8px;
background: linear-gradient(135deg, #377f4b, #148255);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-stat-item .stat-label {
font-size: 14px;
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Responsive Design */
@media (max-width: 768px) {
.cta-section {
padding: 60px 0;
}
.cta-content {
padding: 40px 25px;
}
.cta-title {
font-size: 2.5rem;
}
.cta-text {
font-size: 16px;
}
.cta-features {
gap: 20px;
}
.cta-feature-item {
min-width: 180px;
padding: 15px;
}
.cta-feature-item .feature-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-stats {
gap: 20px;
}
.cta-stat-item {
min-width: 100px;
padding: 15px;
}
}
@media (max-width: 576px) {
.cta-content {
padding: 30px 20px;
}
.cta-title {
font-size: 2rem;
}
.cta-subtitle {
font-size: 14px;
}
.cta-icon {
width: 40px;
height: 40px;
font-size: 16px;
}
.cta-features {
flex-direction: column;
align-items: center;
}
.cta-feature-item {
min-width: auto;
width: 100%;
max-width: 300px;
}
.cta-primary-btn, .cta-secondary-btn {
padding: 15px 30px;
font-size: 14px;
}
.cta-stats {
flex-direction: column;
align-items: center;
}
.cta-stat-item {
min-width: auto;
width: 100%;
max-width: 200px;
}
}
/* Enhanced Hero Section */
.hero-area-wrapper {
position: relative;
overflow: hidden;
}
.hero-slider {
position: relative;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
min-height: 100vh;
display: flex;
align-items: center;
animation: heroZoom 20s ease-in-out infinite;
}
@keyframes heroZoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.5) 0%,
rgba(55, 127, 75, 0.4) 50%,
rgba(20, 130, 85, 0.5) 100%);
z-index: 1;
animation: overlayPulse 8s ease-in-out infinite;
}
@keyframes overlayPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.9; }
}
.hero-slider .container {
position: relative;
z-index: 2;
}
.hero-single {
color: white;
position: relative;
z-index: 2;
text-align: center;
padding: 155px 0 200px 0;
}
/* Animation Classes */
.animate-fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease-out forwards;
}
.animate-fade-in-up:nth-child(1) {
animation-delay: 0.2s;
}
.animate-fade-in-up:nth-child(2) {
animation-delay: 0.4s;
}
.animate-fade-in-up:nth-child(3) {
animation-delay: 0.6s;
}
.animate-fade-in-up:nth-child(4) {
animation-delay: 0.8s;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.hero-single .sub-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
color: white;
position: relative;
}
.hero-single .sub-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #377f4b, transparent);
animation: lineExpand 1.5s ease-out 1s forwards;
}
@keyframes lineExpand {
0% { width: 0; }
100% { width: 100px; }
}
.hero-single .title {
font-size: 4.5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 25px;
color: white;
position: relative;
overflow: hidden;
}
.hero-single .title::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: titleShine 3s ease-in-out 1.5s infinite;
}
@keyframes titleShine {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.hero-single .text {
font-size: 18px;
line-height: 1.6;
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: white;
position: relative;
}
.hero-single .text::before {
content: '';
position: absolute;
left: -20px;
top: 0;
width: 3px;
height: 0;
background: linear-gradient(to bottom, #377f4b, #148255);
animation: textLine 1s ease-out 1.2s forwards;
}
@keyframes textLine {
0% { height: 0; }
100% { height: 100%; }
}
.das-hero-btn {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
position: relative;
}
.das-hero-btn::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: btnLineExpand 1s ease-out 1.4s forwards;
}
@keyframes btnLineExpand {
0% { width: 0; }
100% { width: 200px; }
}
.button-one {
background: linear-gradient(135deg, #377f4b, #148255);
border: none;
padding: 18px 35px;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
}
.button-one::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.button-one:hover::before {
left: 100%;
}
.button-one:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 35px rgba(55, 127, 75, 0.4);
color: white;
text-decoration: none;
}
.button-two {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 18px 35px;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.button-two::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.button-two:hover::before {
left: 100%;
}
.button-two:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
color: white;
text-decoration: none;
border-color: rgba(255, 255, 255, 0.5);
}
/* Floating particles animation */
.hero-area-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(55, 127, 75, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(55, 127, 75, 0.08) 0%, transparent 50%);
animation: particleFloat 15s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
@keyframes particleFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero-single .title {
font-size: 3.5rem;
}
}
/* Laptop Screen Optimization (15-inch and similar) */
@media (max-width: 1366px) and (min-width: 1024px) {
/* General scaling */
.container {
max-width: 1100px;
}
/* Typography scaling - More aggressive reduction */
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: 0.9rem; }
h6, .h6 { font-size: 0.8rem; }
/* Hero section */
.hero-single .title {
font-size: 2.2rem;
}
.hero-single .text {
font-size: 14px;
}
/* Statistics cards - Much smaller */
.stat-card {
padding: 20px 15px;
}
.stat-icon {
width: 40px;
height: 40px;
font-size: 20px;
}
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 12px;
}
.stat-description {
font-size: 11px;
}
/* Service cards */
.future-card {
padding: 20px 15px;
}
.future-card h5 {
font-size: 15px;
}
.future-icon-area {
width: 50px;
height: 50px;
}
.future-icon-area img {
width: 25px;
height: 25px;
}
/* About section */
.about-content .title {
font-size: 1.8rem;
}
.about-content .text {
font-size: 14px;
}
.about-list-wrap ul li {
padding: 15px 18px;
gap: 15px;
}
.about-list-wrap ul li i {
width: 35px;
height: 35px;
font-size: 16px;
}
.about-list-wrap ul li .list-content h5 {
font-size: 14px;
}
.about-list-wrap ul li .list-content p {
font-size: 12px;
}
/* Team cards */
.team-card-wrap {
padding: 15px;
}
.team-name {
font-size: 16px;
}
.team-designation {
font-size: 12px;
}
/* Buttons */
.button-one, .button-two {
padding: 10px 20px;
font-size: 13px;
}
/* Navigation */
.navbar-nav .nav-link {
font-size: 13px;
padding: 6px 10px;
}
/* Logo */
.navbar-brand {
font-size: 1.2rem;
}
/* Section padding */
.section-padding {
padding: 50px 0;
}
/* Cards and containers */
.about-card-box,
.skills-content,
.contact-form-card,
.contact-info-card {
padding: 30px 25px;
}
/* Experience badge */
.badge-content {
width: 80px;
height: 80px;
padding: 15px;
}
.badge-content .years {
font-size: 18px;
}
.badge-content .text {
font-size: 8px;
}
/* Work process cards */
.work-process-card {
padding: 20px 15px;
}
.work-process-card .icon {
width: 40px;
height: 40px;
}
.work-process-card .title {
font-size: 14px;
}
.work-process-count h1 {
font-size: 2rem;
}
/* Blog cards */
.blog-card-inner {
padding: 20px;
}
.blog-card-inner h5 {
font-size: 16px;
}
.blog-excerpt p {
font-size: 13px;
}
/* Contact forms */
.enhanced-contact-form input,
.enhanced-contact-form textarea {
padding: 10px 15px;
font-size: 13px;
}
/* Footer */
.footer_section h5 {
font-size: 16px;
}
.footer_section p,
.footer_section li {
font-size: 13px;
}
}
@media (max-width: 768px) {
.hero-area-wrapper {
min-height: auto;
}
.hero-slider {
height: auto;
animation: none;
background-size: cover !important;
background-position: center !important;
}
.hero-single {
padding: 80px 0 100px 0;
}
.hero-single .sub-title {
font-size: 14px;
margin-bottom: 15px;
}
.hero-single .title {
font-size: 2.2rem;
margin-bottom: 20px;
line-height: 1.2;
}
.hero-single .text {
font-size: 14px;
margin-bottom: 30px;
line-height: 1.6;
}
.das-hero-btn {
flex-direction: column;
align-items: center;
gap: 15px;
}
.das-hero-btn .button-one,
.das-hero-btn .button-two {
width: 100%;
max-width: 280px;
padding: 12px 20px;
font-size: 14px;
text-align: center;
}
.button-one:hover,
.button-two:hover {
transform: translateY(-3px) scale(1.02);
}
/* Disable animations on mobile for better performance */
.animate-fade-in-up {
animation: none;
opacity: 1;
transform: none;
}
.hero-single .title::before,
.hero-single .sub-title::after,
.das-hero-btn::before {
animation: none;
}
}
@media (max-width: 576px) {
.hero-area-wrapper {
min-height: 60vh;
}
.hero-slider {
height: 60vh;
background-size: cover !important;
background-position: center !important;
}
.hero-single {
padding: 60px 0 80px 0;
}
.hero-single .sub-title {
font-size: 12px;
margin-bottom: 12px;
line-height: 1.4;
}
.hero-single .title {
font-size: 1.8rem;
margin-bottom: 15px;
line-height: 1.2;
}
.hero-single .text {
font-size: 13px;
margin-bottom: 25px;
line-height: 1.5;
}
.das-hero-btn {
gap: 12px;
}
.das-hero-btn .button-one,
.das-hero-btn .button-two {
max-width: 250px;
padding: 10px 18px;
font-size: 13px;
}
.hero-single .title::before {
animation: none;
}
.hero-single .sub-title::after {
animation: none;
width: 50px;
}
.das-hero-btn::before {
animation: none;
width: 120px;
}
}
@media (max-width: 480px) {
.hero-area-wrapper {
min-height: 50vh;
}
.hero-slider {
height: 50vh;
}
.hero-single {
padding: 40px 0 60px 0;
}
.hero-single .sub-title {
font-size: 11px;
margin-bottom: 10px;
}
.hero-single .title {
font-size: 1.5rem;
margin-bottom: 12px;
}
.hero-single .text {
font-size: 12px;
margin-bottom: 20px;
}
.das-hero-btn .button-one,
.das-hero-btn .button-two {
max-width: 220px;
padding: 8px 16px;
font-size: 12px;
}
}
@media (max-width: 768px) {
.about-us-area {
padding: 40px 0;
}
.about-card-box {
min-height: auto;
flex-direction: column;
margin: 0;
}
.about-content {
padding: 30px 20px;
height: auto;
justify-content: flex-start;
}
.about-content .sub-title {
font-size: 12px;
margin-bottom: 15px;
}
.about-content .title {
font-size: 1.8rem;
margin-bottom: 20px;
line-height: 1.3;
}
.about-content .text {
font-size: 14px;
margin-bottom: 25px;
}
.about-list-wrap {
margin-bottom: 30px;
}
.about-list-wrap ul li {
padding: 12px 15px;
gap: 12px;
margin-bottom: 15px;
}
.about-list-wrap ul li i {
width: 35px;
height: 35px;
font-size: 16px;
}
.about-list-wrap ul li .list-content h5 {
font-size: 14px;
margin-bottom: 5px;
}
.about-list-wrap ul li .list-content p {
font-size: 12px;
line-height: 1.4;
}
.about-img {
padding: 20px 15px;
height: auto;
order: -1;
}
.about-img .img-hover-wrapper {
border-radius: 15px;
}
.experience-badge {
bottom: 15px;
right: 15px;
}
.badge-content {
width: 80px;
height: 80px;
padding: 10px;
}
.badge-content .years {
font-size: 18px;
}
.badge-content .text {
font-size: 8px;
}
.about-btn .button-one {
padding: 12px 25px;
font-size: 14px;
width: 100%;
justify-content: center;
}
}
@media (max-width: 576px) {
.about-us-area {
padding: 30px 0;
}
.about-card-box {
min-height: auto;
flex-direction: column;
margin: 0;
border-radius: 15px;
}
.about-content {
padding: 25px 15px;
height: auto;
justify-content: flex-start;
}
.about-content .sub-title {
font-size: 11px;
margin-bottom: 12px;
letter-spacing: 1px;
}
.about-content .title {
font-size: 1.5rem;
margin-bottom: 15px;
line-height: 1.3;
}
.about-content .text {
font-size: 13px;
margin-bottom: 20px;
line-height: 1.5;
}
.about-list-wrap {
margin-bottom: 25px;
}
.about-list-wrap ul li {
padding: 10px 12px;
gap: 10px;
margin-bottom: 12px;
border-radius: 10px;
}
.about-list-wrap ul li i {
width: 30px;
height: 30px;
font-size: 14px;
}
.about-list-wrap ul li .list-content h5 {
font-size: 13px;
margin-bottom: 3px;
}
.about-list-wrap ul li .list-content p {
font-size: 11px;
line-height: 1.3;
}
.about-img {
padding: 15px 10px;
height: auto;
order: -1;
}
.about-img .img-hover-wrapper {
border-radius: 12px;
}
.experience-badge {
bottom: 10px;
right: 10px;
}
.badge-content {
width: 70px;
height: 70px;
padding: 8px;
}
.badge-content .years {
font-size: 16px;
}
.badge-content .text {
font-size: 7px;
}
.about-btn .button-one {
padding: 10px 20px;
font-size: 13px;
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.about-us-area {
padding: 20px 0;
}
.about-card-box {
border-radius: 12px;
}
.about-content {
padding: 20px 12px;
}
.about-content .sub-title {
font-size: 10px;
margin-bottom: 10px;
}
.about-content .title {
font-size: 1.3rem;
margin-bottom: 12px;
}
.about-content .text {
font-size: 12px;
margin-bottom: 18px;
}
.about-list-wrap ul li {
padding: 8px 10px;
gap: 8px;
margin-bottom: 10px;
}
.about-list-wrap ul li i {
width: 28px;
height: 28px;
font-size: 13px;
}
.about-list-wrap ul li .list-content h5 {
font-size: 12px;
margin-bottom: 2px;
}
.about-list-wrap ul li .list-content p {
font-size: 10px;
}
.about-img {
padding: 12px 8px;
}
.experience-badge {
bottom: 8px;
right: 8px;
}
.badge-content {
width: 60px;
height: 60px;
padding: 6px;
}
.badge-content .years {
font-size: 14px;
}
.badge-content .text {
font-size: 6px;
}
.about-btn .button-one {
padding: 8px 16px;
font-size: 12px;
}
}
/* Clean Modern Navbar Styles */
.header_menu {
background: #ffffff !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
border-bottom: 1px solid #f0f0f0 !important;
transition: all 0.3s ease !important;
}
.header_menu .brands_logo .side-box-icon {
background: #f8f9fa !important;
border-right: 1px solid #e9ecef !important;
transition: all 0.3s ease !important;
}
.header_menu .brands_logo .side-box-icon:hover {
background: #e9ecef !important;
}
.header_menu .brands_logo .side-box-bar.baricon-left {
color: var(--primary-color) !important;
font-size: 20px !important;
transition: all 0.3s ease !important;
}
.header_menu .brands_logo .side-box-bar.baricon-left:hover {
color: var(--secendary-color) !important;
}
.header_menu .brands_logo .barnds {
padding-left: 30px !important;
transition: all 0.3s ease !important;
}
.header_menu .main-menu li a {
color: #333333 !important;
font-weight: 500 !important;
position: relative !important;
transition: all 0.3s ease !important;
padding: 40px 0 !important;
letter-spacing: 0.3px !important;
}
.header_menu .main-menu li a::after {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
content: "" !important;
width: 0 !important;
height: 3px !important;
background: var(--primary-color) !important;
transition: all 0.3s ease !important;
}
.header_menu .main-menu li a:hover {
color: var(--primary-color) !important;
}
.header_menu .main-menu li a:hover::after {
width: 100% !important;
}
.right_menu .das_btn .get-btn {
background: var(--primary-color) !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 6px !important;
color: white !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.right_menu .das_btn .get-btn:hover {
background: var(--secendary-color) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* Sticky navbar */
.stickey-wrapper.fixed .header_menu {
background: #ffffff !important;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1) !important;
}
/* Mobile menu */
.das-menu-wrapper .das-menu-area {
background: #ffffff !important;
border: 1px solid #e9ecef !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}
.das-menu-wrapper .mobile-logo {
background: #f8f9fa !important;
border-radius: 8px !important;
padding: 15px !important;
margin-bottom: 20px !important;
}
.das-menu-wrapper .das-mobile-menu ul li a {
color: #333333 !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
border-radius: 6px !important;
margin: 3px 0 !important;
padding: 12px 16px !important;
}
.das-menu-wrapper .das-mobile-menu ul li a:hover {
background: #f8f9fa !important;
color: var(--primary-color) !important;
}
.das-menu-wrapper .das_btn .mob_get_btn {
background: var(--primary-color) !important;
border: none !important;
padding: 12px 24px !important;
border-radius: 6px !important;
color: white !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.das-menu-wrapper .das_btn .mob_get_btn:hover {
background: var(--secendary-color) !important;
}
/* Dropdown Menu Styles */
.header_menu .main-menu .dropdown {
position: relative !important;
}
.header_menu .main-menu .dropdown .fas.fa-chevron-down {
font-size: 12px !important;
margin-left: 5px !important;
transition: all 0.3s ease !important;
}
.header_menu .main-menu .dropdown:hover .fas.fa-chevron-down {
transform: rotate(180deg) !important;
}
.header_menu .main-menu .dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: #ffffff !important;
min-width: 280px !important;
max-height: 400px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
border: 1px solid #e9ecef !important;
border-radius: 8px !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
transition: all 0.3s ease !important;
z-index: 1000 !important;
padding: 10px 0 !important;
margin-top: 5px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.header_menu .main-menu .dropdown:hover .dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.header_menu .main-menu .dropdown-menu li {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.header_menu .main-menu .dropdown-menu li a {
display: block !important;
padding: 12px 20px !important;
color: #333333 !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
border-bottom: 1px solid #f8f9fa !important;
position: relative !important;
}
.header_menu .main-menu .dropdown-menu li:last-child a {
border-bottom: none !important;
}
.header_menu .main-menu .dropdown-menu li a:hover {
background: #f8f9fa !important;
color: var(--primary-color) !important;
padding-left: 25px !important;
}
.header_menu .main-menu .dropdown-menu li a::after {
display: none !important;
}
/* Mobile Dropdown Styles */
.das-menu-wrapper .mobile-dropdown {
position: relative !important;
}
.das-menu-wrapper .mobile-dropdown .fas.fa-chevron-down {
font-size: 12px !important;
margin-left: 5px !important;
transition: all 0.3s ease !important;
}
.das-menu-wrapper .mobile-dropdown.active .fas.fa-chevron-down {
transform: rotate(180deg) !important;
}
.das-menu-wrapper .mobile-submenu {
display: none !important;
background: #f8f9fa !important;
border-radius: 8px !important;
margin: 5px 0 !important;
padding: 10px 0 !important;
border-left: 3px solid var(--primary-color) !important;
}
.das-menu-wrapper .mobile-dropdown.active .mobile-submenu {
display: block !important;
}
.das-menu-wrapper .mobile-submenu li {
margin: 0 !important;
padding: 0 !important;
}
.das-menu-wrapper .mobile-submenu li a {
padding: 10px 20px 10px 35px !important;
font-size: 14px !important;
color: #666666 !important;
border-bottom: 1px solid #e9ecef !important;
transition: all 0.3s ease !important;
}
.das-menu-wrapper .mobile-submenu li:last-child a {
border-bottom: none !important;
}
.das-menu-wrapper .mobile-submenu li a:hover {
background: #e9ecef !important;
color: var(--primary-color) !important;
padding-left: 40px !important;
}
/* Dropdown arrow indicator */
.header_menu .main-menu .dropdown-menu::before {
content: '' !important;
position: absolute !important;
top: -8px !important;
left: 20px !important;
width: 0 !important;
height: 0 !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid #ffffff !important;
z-index: 1001 !important;
}
.header_menu .main-menu .dropdown-menu::after {
content: '' !important;
position: absolute !important;
top: -9px !important;
left: 20px !important;
width: 0 !important;
height: 0 !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid #e9ecef !important;
z-index: 1000 !important;
}
/* Responsive adjustments for dropdown */
@media (max-width: 768px) {
.header_menu .main-menu .dropdown-menu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
min-width: auto !important;
}
.header_menu .main-menu .dropdown-menu::before,
.header_menu .main-menu .dropdown-menu::after {
display: none !important;
}
}
/* Enhanced dropdown hover effects */
.header_menu .main-menu .dropdown-menu li a {
position: relative !important;
overflow: hidden !important;
}
.header_menu .main-menu .dropdown-menu li a::before {
content: '' !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 3px !important;
height: 100% !important;
background: var(--primary-color) !important;
transform: scaleY(0) !important;
transition: transform 0.3s ease !important;
}
.header_menu .main-menu .dropdown-menu li a:hover::before {
transform: scaleY(1) !important;
}
/* Dropdown animation */
@keyframes dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header_menu .main-menu .dropdown:hover .dropdown-menu {
animation: dropdownFadeIn 0.3s ease-out !important;
}
/* Custom Scrollbar for Dropdown */
.header_menu .main-menu .dropdown-menu::-webkit-scrollbar {
width: 6px !important;
}
.header_menu .main-menu .dropdown-menu::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 3px !important;
margin: 5px 0 !important;
}
.header_menu .main-menu .dropdown-menu::-webkit-scrollbar-thumb {
background: var(--primary-color) !important;
border-radius: 3px !important;
transition: all 0.3s ease !important;
}
.header_menu .main-menu .dropdown-menu::-webkit-scrollbar-thumb:hover {
background: var(--secendary-color) !important;
}
/* Firefox scrollbar */
.header_menu .main-menu .dropdown-menu {
scrollbar-width: thin !important;
scrollbar-color: var(--primary-color) #f1f1f1 !important;
}
/* Mobile dropdown scrollbar */
.das-menu-wrapper .mobile-submenu {
max-height: 300px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.das-menu-wrapper .mobile-submenu::-webkit-scrollbar {
width: 4px !important;
}
.das-menu-wrapper .mobile-submenu::-webkit-scrollbar-track {
background: #f8f9fa !important;
border-radius: 2px !important;
margin: 3px 0 !important;
}
.das-menu-wrapper .mobile-submenu::-webkit-scrollbar-thumb {
background: var(--primary-color) !important;
border-radius: 2px !important;
}
.das-menu-wrapper .mobile-submenu::-webkit-scrollbar-thumb:hover {
background: var(--secendary-color) !important;
}
/* Firefox mobile scrollbar */
.das-menu-wrapper .mobile-submenu {
scrollbar-width: thin !important;
scrollbar-color: var(--primary-color) #f8f9fa !important;
}
/* Our Work Page Styles */
/* Portfolio Stats Section */
.portfolio-stats-area {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
padding: 60px 0 !important;
}
.stat-card {
background: #ffffff !important;
padding: 30px 20px !important;
border-radius: 15px !important;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
transition: all 0.3s ease !important;
margin-bottom: 20px !important;
}
.stat-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}
.stat-icon {
width: 60px !important;
height: 60px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 20px !important;
color: white !important;
font-size: 24px !important;
}
.stat-number {
font-size: 36px !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin-bottom: 10px !important;
}
.stat-title {
font-size: 16px !important;
color: #666666 !important;
font-weight: 500 !important;
}
/* Portfolio Showcase Section */
.portfolio-showcase-area {
padding: 80px 0 !important;
}
.section-header {
margin-bottom: 60px !important;
}
.section-header .sub-title {
color: var(--primary-color) !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
margin-bottom: 15px !important;
}
.section-header .sub-title .dash {
display: inline-block !important;
width: 30px !important;
height: 2px !important;
background: var(--primary-color) !important;
margin: 0 15px !important;
vertical-align: middle !important;
}
.section-header .title {
font-size: 42px !important;
font-weight: 700 !important;
color: #333333 !important;
margin-bottom: 20px !important;
}
.section-header .description {
font-size: 18px !important;
color: #666666 !important;
max-width: 600px !important;
margin: 0 auto !important;
line-height: 1.6 !important;
}
/* Project Filter */
.project-filter {
margin-bottom: 50px !important;
}
.filter-btn {
background: transparent !important;
border: 2px solid #e9ecef !important;
color: #666666 !important;
padding: 12px 25px !important;
margin: 0 10px 10px 0 !important;
border-radius: 25px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: white !important;
transform: translateY(-2px) !important;
}
/* Project Cards */
.project-card {
background: #ffffff !important;
border-radius: 15px !important;
overflow: hidden !important;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
transition: all 0.3s ease !important;
margin-bottom: 30px !important;
}
/* Ensure 3 columns on large screens */
/* Project Grid Layout - Let Bootstrap handle the grid naturally */
.project-grid {
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
}
.project-item {
transition: all 0.3s ease !important;
margin-bottom: 30px !important;
display: flex !important;
margin: 0 !important; /* Override conflicting margin from style.css */
padding: 0 15px !important; /* Add proper Bootstrap gutter */
}
/* Ensure proper spacing and alignment */
.project-item .project-card {
width: 100% !important;
height: 100% !important;
}
/* ============== Our Expertise Page Styles =============== */
/* Expertise Hero Area */
.expertise-hero-area {
background: transparent !important;
color: #333 !important;
position: relative !important;
overflow: hidden !important;
}
.expertise-hero-area::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: url('data:image/svg+xml,') !important;
opacity: 0.3 !important;
}
.expertise-hero-content {
position: relative !important;
z-index: 2 !important;
}
.expertise-hero-content .sub-title {
color: var(--primary-color) !important;
font-size: 16px !important;
font-weight: 600 !important;
margin-bottom: 20px !important;
display: block !important;
}
.expertise-hero-content .title {
font-size: 48px !important;
font-weight: 700 !important;
margin-bottom: 25px !important;
line-height: 1.2 !important;
color: #333 !important;
}
.expertise-hero-content .description {
font-size: 18px !important;
line-height: 1.6 !important;
margin-bottom: 40px !important;
color: #666 !important;
}
.expertise-stats {
display: flex !important;
gap: 40px !important;
margin-top: 30px !important;
}
.expertise-stats .stat-item {
text-align: center !important;
}
.expertise-stats .stat-number {
font-size: 36px !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
display: block !important;
margin-bottom: 8px !important;
}
.expertise-stats .stat-label {
font-size: 14px !important;
color: #666 !important;
font-weight: 500 !important;
}
.expertise-hero-image {
position: relative !important;
text-align: center !important;
}
.expertise-hero-image img {
border-radius: 15px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease !important;
}
.expertise-hero-image:hover img {
transform: translateY(-10px) !important;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important;
}
.floating-badge {
position: absolute !important;
top: 20px !important;
right: 20px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
padding: 15px 20px !important;
border-radius: 25px !important;
font-weight: 600 !important;
font-size: 14px !important;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
animation: float 3s ease-in-out infinite !important;
}
.floating-badge i {
margin-right: 8px !important;
font-size: 16px !important;
}
/* Services Showcase Area */
.services-showcase-area {
background: #ffffff !important;
}
.service-categories {
margin-bottom: 50px !important;
}
.category-btn {
background: transparent !important;
border: 2px solid var(--primary-color) !important;
color: var(--primary-color) !important;
padding: 12px 25px !important;
border-radius: 25px !important;
font-weight: 600 !important;
font-size: 14px !important;
margin: 0 10px 15px 0 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.category-btn:hover,
.category-btn.active {
background: var(--primary-color) !important;
color: white !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
.services-grid {
margin: 0 !important;
}
.service-item {
margin-bottom: 30px !important;
transition: all 0.3s ease !important;
}
.service-card {
background: white !important;
border-radius: 15px !important;
overflow: hidden !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.service-card:hover {
transform: translateY(-10px) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}
.service-image {
position: relative !important;
height: 200px !important;
overflow: hidden !important;
}
.service-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: all 0.3s ease !important;
}
.service-card:hover .service-image img {
transform: scale(1.1) !important;
}
.service-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, 0.7) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
}
.service-card:hover .service-overlay {
opacity: 1 !important;
}
.service-icon {
color: white !important;
font-size: 40px !important;
animation: bounceIn 0.6s ease-out !important;
}
.service-content {
padding: 25px !important;
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.service-content h4 {
font-size: 20px !important;
font-weight: 600 !important;
margin-bottom: 15px !important;
color: #333333 !important;
}
.service-content h4 a {
color: #333333 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
}
.service-content h4 a:hover {
color: var(--primary-color) !important;
}
.service-content p {
font-size: 14px !important;
line-height: 1.6 !important;
color: #666666 !important;
margin-bottom: 20px !important;
flex-grow: 1 !important;
}
.service-features {
margin-bottom: 20px !important;
}
.service-features span {
display: block !important;
font-size: 12px !important;
color: #888888 !important;
margin-bottom: 8px !important;
font-weight: 500 !important;
}
.service-features span i {
color: var(--primary-color) !important;
margin-right: 8px !important;
font-size: 10px !important;
}
.service-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
padding: 12px 20px !important;
border-radius: 25px !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
transition: all 0.3s ease !important;
margin-top: auto !important;
}
.service-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
color: white !important;
}
.service-btn i {
transition: all 0.3s ease !important;
}
.service-btn:hover i {
transform: translateX(3px) !important;
}
.load-more-services-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
border: none !important;
padding: 15px 30px !important;
border-radius: 30px !important;
font-weight: 600 !important;
font-size: 16px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin-top: 20px !important;
}
.load-more-services-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}
/* Why Choose Us Area */
.why-choose-us-area {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}
.why-choose-content .sub-title {
color: var(--primary-color) !important;
font-size: 16px !important;
font-weight: 600 !important;
margin-bottom: 20px !important;
display: block !important;
}
.why-choose-content .title {
font-size: 36px !important;
font-weight: 700 !important;
margin-bottom: 20px !important;
color: #333333 !important;
}
.why-choose-content .description {
font-size: 16px !important;
line-height: 1.6 !important;
color: #666666 !important;
margin-bottom: 40px !important;
}
.features-list {
display: flex !important;
flex-direction: column !important;
gap: 25px !important;
}
.feature-item {
display: flex !important;
align-items: flex-start !important;
gap: 20px !important;
padding: 20px !important;
background: white !important;
border-radius: 10px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
transition: all 0.3s ease !important;
}
.feature-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
.feature-icon {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 20px !important;
flex-shrink: 0 !important;
}
.feature-content h5 {
font-size: 18px !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
color: #333333 !important;
}
.feature-content p {
font-size: 14px !important;
color: #666666 !important;
line-height: 1.5 !important;
margin: 0 !important;
}
.why-choose-image {
position: relative !important;
text-align: center !important;
}
.why-choose-image img {
border-radius: 15px !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}
.experience-badge {
position: absolute !important;
bottom: -20px !important;
right: -20px !important;
}
.badge-content {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
padding: 20px !important;
border-radius: 50% !important;
width: 120px !important;
height: 120px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
animation: pulse 2s infinite !important;
}
.badge-content .years {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.badge-content .text {
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
/* CTA Area */
.cta-area {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
color: white !important;
}
.cta-content .title {
font-size: 36px !important;
font-weight: 700 !important;
margin-bottom: 20px !important;
}
.cta-content .description {
font-size: 18px !important;
line-height: 1.6 !important;
margin-bottom: 40px !important;
opacity: 0.9 !important;
}
.cta-buttons {
display: flex !important;
gap: 20px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.cta-primary-btn,
.cta-secondary-btn {
padding: 15px 30px !important;
border-radius: 30px !important;
font-weight: 600 !important;
font-size: 16px !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
transition: all 0.3s ease !important;
}
.cta-primary-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
}
.cta-secondary-btn {
background: transparent !important;
color: white !important;
border: 2px solid white !important;
}
.cta-primary-btn:hover,
.cta-secondary-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
color: white !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.expertise-hero-content .title {
font-size: 36px !important;
}
.expertise-stats {
flex-direction: column !important;
gap: 20px !important;
}
.service-categories {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.category-btn {
margin: 0 5px 10px 0 !important;
padding: 10px 20px !important;
font-size: 13px !important;
}
.why-choose-content .title {
font-size: 28px !important;
}
.cta-content .title {
font-size: 28px !important;
}
.cta-buttons {
flex-direction: column !important;
align-items: center !important;
}
}
@media (max-width: 576px) {
.expertise-hero-content .title {
font-size: 28px !important;
}
.expertise-hero-content .description {
font-size: 16px !important;
}
.service-content {
padding: 20px !important;
}
.service-content h4 {
font-size: 18px !important;
}
.why-choose-content .title {
font-size: 24px !important;
}
.cta-content .title {
font-size: 24px !important;
}
.cta-content .description {
font-size: 16px !important;
}
}
/* Animation Keyframes */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.project-card:hover {
transform: translateY(-10px) !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}
.project-image {
position: relative !important;
overflow: hidden !important;
height: 250px !important;
}
.project-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: all 0.3s ease !important;
}
.project-card:hover .project-image img {
transform: scale(1.1) !important;
}
.project-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, 0.8) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
}
.project-card:hover .project-overlay {
opacity: 1 !important;
}
.project-details {
text-align: center !important;
color: white !important;
padding: 20px !important;
}
.project-details h4 {
font-size: 20px !important;
font-weight: 600 !important;
margin-bottom: 10px !important;
}
.project-details p {
font-size: 14px !important;
margin-bottom: 15px !important;
opacity: 0.9 !important;
}
.project-meta {
display: flex !important;
justify-content: center !important;
gap: 20px !important;
margin-bottom: 20px !important;
font-size: 12px !important;
opacity: 0.8 !important;
}
.project-meta span {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.view-project-btn {
background: var(--primary-color) !important;
color: white !important;
padding: 10px 20px !important;
border-radius: 25px !important;
text-decoration: none !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
display: inline-block !important;
}
.view-project-btn:hover {
background: var(--secendary-color) !important;
transform: translateY(-2px) !important;
color: white !important;
}
.project-info {
padding: 20px !important;
}
.project-info h5 {
font-size: 18px !important;
font-weight: 600 !important;
color: #333333 !important;
margin-bottom: 8px !important;
}
.project-category {
background: #f8f9fa !important;
color: var(--primary-color) !important;
padding: 5px 12px !important;
border-radius: 15px !important;
font-size: 12px !important;
font-weight: 500 !important;
}
/* Load More Button */
.load-more-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
border: none !important;
padding: 15px 30px !important;
border-radius: 30px !important;
font-weight: 600 !important;
font-size: 16px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin-top: 20px !important;
}
.load-more-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}
.load-more-btn i {
transition: all 0.3s ease !important;
}
.load-more-btn:hover i {
transform: translateY(2px) !important;
}
/* Testimonials Section */
.testimonials-area {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
color: white !important;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px) !important;
border-radius: 15px !important;
padding: 30px !important;
margin-bottom: 30px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
transition: all 0.3s ease !important;
}
.testimonial-card:hover {
transform: translateY(-5px) !important;
background: rgba(255, 255, 255, 0.15) !important;
}
.testimonial-content {
margin-bottom: 20px !important;
}
.testimonial-content p {
font-size: 16px !important;
line-height: 1.6 !important;
font-style: italic !important;
color: #000000 !important;
}
.testimonial-author {
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
padding-top: 20px !important;
}
.author-info h5 {
font-size: 18px !important;
font-weight: 600 !important;
margin-bottom: 5px !important;
color: #000000 !important;
}
.author-info span {
font-size: 14px !important;
color: #000000 !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.section-header .title {
font-size: 32px !important;
}
.filter-btn {
margin: 0 5px 10px 0 !important;
padding: 10px 20px !important;
font-size: 14px !important;
}
.project-image {
height: 200px !important;
}
.stat-card {
padding: 20px 15px !important;
}
.stat-number {
font-size: 28px !important;
}
.testimonial-card {
padding: 20px !important;
}
}
@media (max-width: 576px) {
.section-header .title {
font-size: 28px !important;
}
.section-header .description {
font-size: 16px !important;
}
.filter-btn {
width: calc(50% - 10px) !important;
margin: 0 5px 10px 0 !important;
}
.project-meta {
flex-direction: column !important;
gap: 10px !important;
}
}
/* Animation for stats */
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stat-card {
animation: countUp 0.6s ease-out !important;
}
/* Project Grid Layout */
.project-grid {
margin: 0 !important;
}
.project-item {
transition: all 0.3s ease !important;
margin-bottom: 30px !important;
}
.project-item.hidden {
opacity: 0 !important;
transform: scale(0.8) !important;
pointer-events: none !important;
}
/* Enhanced hover effects */
.project-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
z-index: -1 !important;
}
.project-card:hover::before {
opacity: 0.05 !important;
}
/* ===== INDEX.HTML SPECIFIC STYLES ===== */
/* Hero Section Specific Animations */
@keyframes heroFadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes heroFadeInLeft {
from {
opacity: 0;
transform: translateX(-80px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes heroFadeInRight {
from {
opacity: 0;
transform: translateX(80px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes heroSlideInUp {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes heroScaleIn {
from {
opacity: 0;
transform: scale(0.6);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes heroFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
25% {
transform: translateY(-15px) rotate(2deg);
}
50% {
transform: translateY(-25px) rotate(0deg);
}
75% {
transform: translateY(-15px) rotate(-2deg);
}
}
@keyframes heroPulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(20, 130, 85, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 20px rgba(20, 130, 85, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(20, 130, 85, 0);
}
}
@keyframes heroGradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes heroGlow {
0%, 100% {
text-shadow: 0 0 20px rgba(20, 130, 85, 0.5);
}
50% {
text-shadow: 0 0 40px rgba(20, 130, 85, 0.8), 0 0 60px rgba(20, 130, 85, 0.4);
}
}
@keyframes heroShimmer {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
@keyframes heroRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes heroBounce {
0%, 20%, 53%, 80%, 100% {
transform: translateY(0);
}
40%, 43% {
transform: translateY(-30px);
}
70% {
transform: translateY(-15px);
}
90% {
transform: translateY(-4px);
}
}
@keyframes heroWave {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
}
/* General Animation Keyframes */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes wave {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
}
/* Hero Section Styles */
.hero-area-wrapper {
position: relative;
overflow: hidden;
}
.hero-slider {
background: url('../images/main-banner.jpg') no-repeat center center;
background-size: cover;
min-height: 100vh;
position: relative;
}
.hero-slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(20,130,85,0.85) 0%, rgba(0,0,0,0.7) 50%, rgba(20,130,85,0.6) 100%);
z-index: 1;
}
.hero-geometric-shapes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
}
.geometric-shape {
position: absolute;
border: 2px solid rgba(255,255,255,0.1);
animation: heroRotate 30s linear infinite;
}
.geometric-shape:nth-child(1) {
width: 100px;
height: 100px;
border-radius: 50%;
top: 15%;
left: 10%;
}
.geometric-shape:nth-child(2) {
width: 150px;
height: 150px;
border-radius: 0;
top: 25%;
right: 15%;
animation-direction: reverse;
animation-duration: 25s;
}
.geometric-shape:nth-child(3) {
width: 80px;
height: 80px;
border-radius: 50%;
bottom: 30%;
left: 20%;
animation-duration: 35s;
}
.geometric-shape:nth-child(4) {
width: 120px;
height: 120px;
border-radius: 0;
bottom: 20%;
right: 25%;
animation-direction: reverse;
animation-duration: 28s;
}
.hero-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.particle {
position: absolute;
background: rgba(255,255,255,0.6);
border-radius: 50%;
animation: heroFloat 6s ease-in-out infinite;
}
.particle:nth-child(1) {
width: 4px;
height: 4px;
top: 20%;
left: 15%;
}
.particle:nth-child(2) {
width: 6px;
height: 6px;
top: 40%;
right: 20%;
animation-delay: 1s;
animation-duration: 8s;
}
.particle:nth-child(3) {
width: 3px;
height: 3px;
bottom: 35%;
left: 30%;
animation-delay: 2s;
animation-duration: 7s;
}
.particle:nth-child(4) {
width: 5px;
height: 5px;
bottom: 25%;
right: 35%;
animation-delay: 3s;
animation-duration: 9s;
}
.hero-single {
padding: 80px 0 120px;
position: relative;
z-index: 3;
}
.hero-badge {
display: inline-block;
background: linear-gradient(45deg, rgba(20,130,85,0.9), rgba(55,127,75,0.9));
color: white;
padding: 12px 25px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(20,130,85,0.3);
border: 1px solid rgba(255,255,255,0.2);
}
.hero-badge i {
margin-right: 8px;
animation: heroRotate 3s linear infinite;
}
.hero-title {
color: #fff;
font-size: 72px;
font-weight: 900;
margin-bottom: 35px;
line-height: 1.1;
text-shadow: 0 5px 15px rgba(0,0,0,0.3);
background: linear-gradient(45deg, #ffffff, #148255, #ffffff, #377f4b, #ffffff);
background-size: 300% 100%;
animation: heroShimmer 4s ease-in-out infinite, heroGlow 3s ease-in-out infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
color: #fff;
font-size: 24px;
margin-bottom: 50px;
opacity: 0.95;
font-weight: 300;
line-height: 1.6;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.hero-animate-wave {
display: inline-block;
animation: heroWave 2s ease-in-out infinite;
}
.hero-buttons {
margin-bottom: 60px;
}
.hero-btn-primary {
background: linear-gradient(45deg, #148255, #377f4b);
color: white;
padding: 20px 40px;
text-decoration: none;
border-radius: 50px;
margin-right: 25px;
font-weight: 700;
font-size: 18px;
box-shadow: 0 15px 35px rgba(20,130,85,0.4);
border: 2px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
display: inline-block;
position: relative;
overflow: hidden;
}
.hero-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(20,130,85,0.5);
color: white;
}
.hero-btn-primary span {
position: relative;
z-index: 2;
}
.btn-shimmer {
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.5s;
}
.hero-btn-primary:hover .btn-shimmer {
left: 100%;
}
.hero-btn-secondary {
background: transparent;
color: white;
padding: 20px 40px;
text-decoration: none;
border: 3px solid rgba(255,255,255,0.8);
border-radius: 50px;
font-weight: 600;
font-size: 18px;
transition: all 0.3s ease;
display: inline-block;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.hero-btn-secondary:hover {
background: white;
color: #148255;
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(255,255,255,0.3);
}
.hero-btn-secondary span {
position: relative;
z-index: 2;
}
.hero-scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
text-align: center;
}
.scroll-text {
color: white;
font-size: 14px;
margin-bottom: 15px;
opacity: 0.8;
font-weight: 500;
}
.scroll-arrow {
width: 40px;
height: 40px;
border: 2px solid rgba(255,255,255,0.8);
border-top: none;
border-left: none;
transform: rotate(45deg);
margin: 0 auto;
position: relative;
}
.arrow-glow {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid rgba(20,130,85,0.6);
border-top: none;
border-left: none;
transform: rotate(45deg);
animation: heroPulse 2s ease-in-out infinite;
}
/* Animation Classes */
.hero-animate-fade-in-up {
animation: heroFadeInUp 1s ease-out forwards;
}
.hero-animate-pulse {
animation: heroPulse 2s ease-in-out infinite;
}
.hero-animate-bounce {
animation: heroBounce 2s ease-in-out infinite;
}
.scroll-animate {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.scroll-animate.animate {
opacity: 1;
transform: translateY(0);
}
.scroll-animate-scale {
opacity: 0;
transform: scale(0.8);
transition: all 0.6s ease;
}
.scroll-animate-scale.animate {
opacity: 1;
transform: scale(1);
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
/* Statistics Section */
.hero-stats-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.hero-stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(20,130,85,0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(20,130,85,0.1) 0%, transparent 50%);
}
.hero-stats-section .container {
position: relative;
z-index: 2;
}
.hero-stats-section .sub-title {
color: #148255;
font-size: 18px;
margin-bottom: 15px;
font-weight: 600;
}
.hero-stats-section .title {
font-size: 48px;
font-weight: bold;
margin-bottom: 25px;
background: linear-gradient(45deg, #148255, #377f4b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-stats-section .text {
font-size: 20px;
color: #666;
max-width: 600px;
margin: 0 auto;
}
.stat-card {
background: white;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 1px solid rgba(0,123,255,0.1);
text-align: center;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(20,130,85,0.15);
}
.stat-icon {
font-size: 56px;
color: #148255;
margin-bottom: 25px;
display: inline-block;
}
.stat-number {
font-size: 48px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
background: linear-gradient(45deg, #148255, #377f4b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 18px;
color: #666;
font-weight: 500;
}
/* Services Section */
.future-area-wrapper {
padding: 100px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}
.future-area-wrapper::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0,123,255,0.1) 0%, transparent 70%);
border-radius: 50%;
}
.future-area-wrapper::after {
content: '';
position: absolute;
bottom: -30%;
left: -15%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(0,123,255,0.08) 0%, transparent 70%);
border-radius: 50%;
}
.future-area-wrapper .container {
position: relative;
z-index: 2;
}
.future-area-wrapper .sub-title {
color: #007bff;
font-size: 18px;
margin-bottom: 15px;
font-weight: 600;
}
.future-area-wrapper .title {
font-size: 48px;
font-weight: bold;
margin-bottom: 25px;
background: linear-gradient(45deg, #007bff, #0056b3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.future-area-wrapper .text {
font-size: 20px;
color: #666;
max-width: 600px;
margin: 0 auto;
}
.service-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
border: 1px solid rgba(0,123,255,0.1);
position: relative;
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0,123,255,0.2);
}
.service-image {
height: 250px;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.service-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0,123,255,0.8), rgba(0,86,179,0.8));
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card:hover .service-image::before {
opacity: 1;
}
.service-image i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 48px;
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card:hover .service-image i {
opacity: 1;
}
.service-content {
padding: 35px;
}
.service-content h5 {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}
.service-content p {
color: #666;
margin-bottom: 25px;
line-height: 1.6;
}
.button-one {
background: linear-gradient(45deg, #007bff, #0056b3);
color: white;
padding: 12px 25px;
text-decoration: none;
border-radius: 25px;
font-weight: 500;
display: inline-block;
transition: all 0.3s ease;
}
.button-one:hover {
background: linear-gradient(45deg, #0056b3, #004085);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,123,255,0.3);
color: white;
}
.button-one i {
margin-left: 8px;
transition: transform 0.3s ease;
}
.button-one:hover i {
transform: translateX(5px);
}
/* Service Background Images */
.service-image-1 {
background: url('../images/future-img/construction.jpeg') no-repeat center center;
}
.service-image-2 {
background: url('../images/future-img/construction2.jpeg') no-repeat center center;
}
.service-image-3 {
background: url('../images/future-img/construction3.jpeg') no-repeat center center;
}
/* Counter Animation */
.counter-animate {
transition: all 0.3s ease;
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero-title {
font-size: 60px;
}
.hero-subtitle {
font-size: 20px;
}
.hero-stats-section .title,
.future-area-wrapper .title {
font-size: 42px;
}
}
@media (max-width: 992px) {
.hero-title {
font-size: 48px;
}
.hero-subtitle {
font-size: 18px;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-btn-primary,
.hero-btn-secondary {
margin-right: 0;
margin-bottom: 15px;
width: 100%;
max-width: 300px;
text-align: center;
}
.hero-stats-section,
.future-area-wrapper {
padding: 80px 0;
}
.hero-stats-section .title,
.future-area-wrapper .title {
font-size: 36px;
}
.stat-card {
padding: 30px 20px;
margin-bottom: 30px;
}
.service-card {
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 36px;
}
.hero-subtitle {
font-size: 16px;
}
.hero-single {
padding: 60px 0 100px;
}
.hero-stats-section,
.future-area-wrapper {
padding: 60px 0;
}
.hero-stats-section .title,
.future-area-wrapper .title {
font-size: 32px;
}
.hero-stats-section .text,
.future-area-wrapper .text {
font-size: 18px;
}
.stat-card {
padding: 25px 15px;
}
.stat-icon {
font-size: 48px;
}
.stat-number {
font-size: 36px;
}
.service-content {
padding: 25px;
}
.service-content h5 {
font-size: 24px;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 28px;
}
.hero-subtitle {
font-size: 14px;
}
.hero-single {
padding: 50px 0 80px;
}
.hero-stats-section,
.future-area-wrapper {
padding: 50px 0;
}
.hero-stats-section .title,
.future-area-wrapper .title {
font-size: 28px;
}
.hero-stats-section .text,
.future-area-wrapper .text {
font-size: 16px;
}
.stat-card {
padding: 20px 15px;
}
.stat-icon {
font-size: 40px;
}
.stat-number {
font-size: 32px;
}
.stat-label {
font-size: 16px;
}
.service-content {
padding: 20px;
}
.service-content h5 {
font-size: 20px;
}
.service-content p {
font-size: 14px;
}
.button-one {
padding: 10px 20px;
font-size: 14px;
}
}
/* ===== NEW CLEAN INDEX.HTML STYLES ===== */
/* Hero Section */
.hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #148255 0%, #377f4b 50%, #20c997 100%);
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../images/main-banner.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.8) 0%, rgba(55, 127, 75, 0.7) 50%, rgba(32, 201, 151, 0.6) 100%);
z-index: 2;
}
.hero-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: particleFloat 6s infinite linear;
}
.particle:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.particle:nth-child(2) {
top: 60%;
left: 80%;
animation-delay: 2s;
}
.particle:nth-child(3) {
top: 80%;
left: 20%;
animation-delay: 4s;
}
.particle:nth-child(4) {
top: 40%;
left: 70%;
animation-delay: 1s;
}
@keyframes particleFloat {
0% {
transform: translateY(0px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.hero-content {
position: relative;
z-index: 4;
color: white;
text-align: center;
padding: 100px 0;
}
.hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 12px 24px;
margin-bottom: 30px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
animation: fadeInUp 1s ease-out;
}
.hero-badge i {
color: #ffd700;
margin-right: 8px;
}
.hero-title {
font-size: 4rem;
font-weight: 800;
margin-bottom: 30px;
line-height: 1.2;
color: #ffffff;
}
@keyframes titleShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.hero-subtitle {
font-size: 1.25rem;
margin-bottom: 40px;
opacity: 0.9;
line-height: 1.6;
animation: fadeInUp 1s ease-out 0.6s both;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.9s both;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(45deg, #148255, #377f4b);
color: white;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(20, 130, 85, 0.3);
}
.hero-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(20, 130, 85, 0.4);
color: white;
text-decoration: none;
}
.hero-btn-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}
.hero-btn-secondary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
color: white;
text-decoration: none;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
text-align: center;
animation: fadeInUp 1s ease-out 1.2s both;
}
.scroll-text {
color: white;
font-size: 14px;
margin-bottom: 10px;
opacity: 0.8;
}
.scroll-arrow {
color: white;
font-size: 20px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stats Section */
.stats-section {
background: white;
padding: 80px 0;
position: relative;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.05) 0%, rgba(55, 127, 75, 0.03) 100%);
pointer-events: none;
}
.stats-section .container {
position: relative;
z-index: 2;
}
.section-subtitle {
color: #148255;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
font-size: 14px;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: #333;
margin-bottom: 20px;
line-height: 1.2;
}
.section-description {
font-size: 1.1rem;
color: #666;
margin-bottom: 50px;
line-height: 1.6;
}
.stat-card {
background: white;
border-radius: 20px;
padding: 40px 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #148255, #377f4b, #20c997);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(20, 130, 85, 0.15);
}
.stat-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 30px;
transition: all 0.3s ease;
}
.stat-card:hover .stat-icon {
transform: scale(1.1) rotate(5deg);
}
.stat-number {
font-size: 3rem;
font-weight: 800;
color: #148255;
margin-bottom: 10px;
line-height: 1;
}
.stat-label {
font-size: 1.1rem;
color: #666;
font-weight: 600;
}
/* Enhanced Services Section */
.services-section {
background: #ffffff;
position: relative;
overflow: hidden;
padding: 80px 0;
}
/* Services Background Pattern */
.services-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 25% 25%, rgba(20, 130, 85, 0.03) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(55, 127, 75, 0.02) 0%, transparent 50%);
pointer-events: none;
animation: servicesBgFloat 20s ease-in-out infinite;
}
/* Animated Background Shapes */
.services-bg-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.services-bg-shapes::before,
.services-bg-shapes::after {
content: '';
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.02), rgba(55, 127, 75, 0.01));
animation: servicesShapeFloat 25s linear infinite;
}
.services-bg-shapes::before {
width: 300px;
height: 300px;
top: -150px;
left: -150px;
animation-delay: 0s;
}
.services-bg-shapes::after {
width: 200px;
height: 200px;
bottom: -100px;
right: -100px;
animation-delay: 10s;
}
/* Floating Geometric Elements */
.services-geometric {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.geometric-element {
position: absolute;
opacity: 0.03;
background: linear-gradient(45deg, #148255, #377f4b);
animation: servicesGeometricFloat 30s linear infinite;
}
.geometric-element:nth-child(1) {
width: 60px;
height: 60px;
top: 15%;
left: 10%;
border-radius: 50%;
animation-delay: 0s;
}
.geometric-element:nth-child(2) {
width: 40px;
height: 40px;
top: 25%;
right: 15%;
transform: rotate(45deg);
animation-delay: 5s;
}
.geometric-element:nth-child(3) {
width: 80px;
height: 40px;
bottom: 20%;
left: 20%;
border-radius: 20px;
animation-delay: 10s;
}
.geometric-element:nth-child(4) {
width: 50px;
height: 50px;
bottom: 30%;
right: 10%;
transform: rotate(30deg);
animation-delay: 15s;
}
/* Subtle Grid Pattern */
.services-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(20, 130, 85, 0.01) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 130, 85, 0.01) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
animation: servicesGridPulse 15s ease-in-out infinite;
}
/* Services Particles */
.services-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.services-particles .particle {
position: absolute;
width: 4px;
height: 4px;
background: linear-gradient(45deg, #148255, #377f4b);
border-radius: 50%;
opacity: 0.4;
animation: serviceParticleFloat 20s linear infinite;
}
.particle-1 { top: 10%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 20%; right: 15%; animation-delay: 5s; }
.particle-3 { bottom: 30%; left: 20%; animation-delay: 10s; }
.particle-4 { bottom: 20%; right: 10%; animation-delay: 15s; }
@keyframes serviceParticleFloat {
0% { transform: translateY(0) scale(0); opacity: 0; }
10% { opacity: 0.4; transform: scale(1); }
90% { opacity: 0.4; }
100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}
/* Services Header */
.services-header {
position: relative;
z-index: 2;
}
.services-badge {
display: inline-block;
width: 80px;
height: 80px;
margin: 0 auto 20px;
position: relative;
}
.services-badge .badge-inner {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #148255, #377f4b, #20c997);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
animation: serviceBadgePulse 3s ease-in-out infinite;
box-shadow:
0 10px 25px rgba(20, 130, 85, 0.3),
0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.services-badge .badge-inner::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: serviceBadgeRotate 4s linear infinite;
}
.services-badge .badge-glow {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.15) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: serviceBadgeGlow 2s ease-in-out infinite;
}
/* Services Decoration */
.services-decoration {
display: flex;
align-items: center;
justify-content: center;
margin-top: 25px;
gap: 15px;
}
.services-decoration .decoration-dot {
width: 10px;
height: 10px;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
animation: serviceDecorationPulse 2s ease-in-out infinite;
box-shadow: 0 0 15px rgba(20, 130, 85, 0.4);
}
/* Enhanced Service Cards */
.service-card {
margin-bottom: 30px;
perspective: 1000px;
}
.service-card .card-inner {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.08),
0 3px 10px rgba(20, 130, 85, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
transform-style: preserve-3d;
height: 100%;
}
.service-card:hover .card-inner {
transform: translateY(-8px) rotateX(3deg);
box-shadow:
0 20px 40px rgba(20, 130, 85, 0.15),
0 10px 25px rgba(0, 0, 0, 0.1);
}
/* Service Image */
.service-image {
position: relative;
height: 200px;
overflow: hidden;
}
.service-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s ease;
}
.service-card:hover .service-img {
transform: scale(1.1);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(20, 130, 85, 0.8) 0%,
rgba(55, 127, 75, 0.7) 50%,
rgba(32, 201, 151, 0.6) 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.4s ease;
}
.service-card:hover .image-overlay {
opacity: 1;
}
/* Service Content */
.service-content {
padding: 25px 20px;
text-align: center;
}
.service-content h5 {
font-size: 1.4rem;
font-weight: 700;
color: #333;
margin-bottom: 12px;
transition: all 0.3s ease;
}
.service-card:hover .service-content h5 {
color: #148255;
}
.service-content p {
color: #666;
line-height: 1.5;
margin-bottom: 18px;
font-size: 0.95rem;
}
.service-btn {
display: inline-flex;
align-items: center;
gap: 8px;
color: #148255;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
padding: 8px 16px;
border-radius: 20px;
background: rgba(20, 130, 85, 0.05);
}
.service-btn:hover {
color: white;
background: linear-gradient(135deg, #148255, #377f4b);
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(20, 130, 85, 0.3);
}
/* Card Effects */
.card-glow {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.4s ease;
pointer-events: none;
}
.service-card:hover .card-glow {
transform: translate(-50%, -50%) scale(2);
opacity: 0.8;
}
.card-sparkles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.service-card:hover .card-sparkles {
opacity: 1;
}
.card-sparkles .sparkle {
position: absolute;
width: 3px;
height: 3px;
background: #148255;
border-radius: 50%;
animation: serviceSparkleTwinkle 1.5s ease-in-out infinite;
}
.card-sparkles .sparkle-1 {
top: 15%;
left: 10%;
animation-delay: 0s;
}
.card-sparkles .sparkle-2 {
top: 25%;
right: 15%;
animation-delay: 0.5s;
}
/* Service Animations */
@keyframes serviceBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes serviceBadgeRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes serviceBadgeGlow {
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes serviceDecorationPulse {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 1; }
}
@keyframes serviceSparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}
/* Services Background Animations */
@keyframes servicesBgFloat {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.03;
}
50% {
transform: translateY(-20px) scale(1.05);
opacity: 0.05;
}
}
@keyframes servicesShapeFloat {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0.02;
}
25% {
transform: translateY(-30px) rotate(90deg);
opacity: 0.03;
}
50% {
transform: translateY(-60px) rotate(180deg);
opacity: 0.02;
}
75% {
transform: translateY(-30px) rotate(270deg);
opacity: 0.03;
}
100% {
transform: translateY(0) rotate(360deg);
opacity: 0.02;
}
}
@keyframes servicesGeometricFloat {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 0.03;
}
25% {
transform: translateY(-40px) translateX(20px) rotate(90deg);
opacity: 0.04;
}
50% {
transform: translateY(-80px) translateX(-20px) rotate(180deg);
opacity: 0.03;
}
75% {
transform: translateY(-40px) translateX(20px) rotate(270deg);
opacity: 0.04;
}
100% {
transform: translateY(0) translateX(0) rotate(360deg);
opacity: 0.03;
}
}
@keyframes servicesGridPulse {
0%, 100% {
opacity: 0.01;
transform: scale(1);
}
50% {
opacity: 0.02;
transform: scale(1.02);
}
}
/* About Section Animations */
@keyframes aboutBgFloat {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.03;
}
50% {
transform: translateY(-30px) scale(1.08);
opacity: 0.05;
}
}
@keyframes aboutParticleFloat {
0% {
transform: translateY(0) translateX(0) scale(0);
opacity: 0;
}
10% {
opacity: 0.3;
transform: scale(1);
}
90% {
opacity: 0.3;
}
100% {
transform: translateY(-100vh) translateX(50px) scale(0);
opacity: 0;
}
}
@keyframes aboutShapeFloat {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0.05;
}
25% {
transform: translateY(-40px) rotate(90deg);
opacity: 0.07;
}
50% {
transform: translateY(-80px) rotate(180deg);
opacity: 0.05;
}
75% {
transform: translateY(-40px) rotate(270deg);
opacity: 0.07;
}
100% {
transform: translateY(0) rotate(360deg);
opacity: 0.05;
}
}
@keyframes aboutBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes aboutBadgeRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes aboutBadgeGlow {
0%, 100% {
opacity: 0.2;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.4;
transform: translate(-50%, -50%) scale(1.3);
}
}
@keyframes aboutDecorationPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.3);
opacity: 1;
}
}
@keyframes aboutTitleShimmer {
0%, 100% {
background-position: -200% center;
}
50% {
background-position: 200% center;
}
}
@keyframes aboutDescriptionLine {
0%, 100% {
opacity: 0.7;
transform: scaleY(1);
}
50% {
opacity: 1;
transform: scaleY(1.2);
}
}
@keyframes experienceBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@keyframes experienceBadgeRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes experienceBadgeGlow {
0%, 100% {
opacity: 0.2;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.4;
transform: translate(-50%, -50%) scale(1.2);
}
}
@keyframes floatElementFloat {
0% {
transform: translateY(0) translateX(0) rotate(0deg);
opacity: 0.8;
}
25% {
transform: translateY(-30px) translateX(20px) rotate(90deg);
opacity: 1;
}
50% {
transform: translateY(-60px) translateX(-20px) rotate(180deg);
opacity: 0.8;
}
75% {
transform: translateY(-30px) translateX(20px) rotate(270deg);
opacity: 1;
}
100% {
transform: translateY(0) translateX(0) rotate(360deg);
opacity: 0.8;
}
}
/* Enhanced About Section */
.about-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
/* About Background Pattern */
.about-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(20, 130, 85, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(55, 127, 75, 0.02) 0%, transparent 50%),
linear-gradient(45deg, transparent 49%, rgba(20, 130, 85, 0.01) 50%, transparent 51%);
background-size: 100% 100%, 100% 100%, 50px 50px;
pointer-events: none;
animation: aboutBgFloat 25s ease-in-out infinite;
}
/* About Particles */
.about-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.about-particles .particle {
position: absolute;
width: 6px;
height: 6px;
background: linear-gradient(45deg, #148255, #377f4b);
border-radius: 50%;
opacity: 0.3;
animation: aboutParticleFloat 30s linear infinite;
}
.particle-1 { top: 15%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 25%; right: 20%; animation-delay: 6s; }
.particle-3 { bottom: 30%; left: 15%; animation-delay: 12s; }
.particle-4 { bottom: 20%; right: 10%; animation-delay: 18s; }
.particle-5 { top: 50%; left: 5%; animation-delay: 24s; }
/* About Shapes */
.about-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.about-shapes .shape {
position: absolute;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.05), rgba(55, 127, 75, 0.03));
border-radius: 50%;
animation: aboutShapeFloat 35s linear infinite;
}
.shape-1 {
width: 120px;
height: 120px;
top: 10%;
right: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 80px;
height: 80px;
bottom: 15%;
left: 5%;
animation-delay: 10s;
}
.shape-3 {
width: 60px;
height: 60px;
top: 60%;
right: 5%;
animation-delay: 20s;
}
/* About Header */
.about-header {
position: relative;
z-index: 2;
margin-bottom: 30px;
}
.about-badge {
display: inline-block;
width: 90px;
height: 90px;
margin: 0 auto 25px;
position: relative;
}
.about-badge .badge-inner {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #148255, #377f4b, #20c997);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 32px;
animation: aboutBadgePulse 4s ease-in-out infinite;
box-shadow:
0 15px 35px rgba(20, 130, 85, 0.3),
0 8px 20px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.about-badge .badge-inner::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: aboutBadgeRotate 5s linear infinite;
}
.about-badge .badge-glow {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: aboutBadgeGlow 3s ease-in-out infinite;
}
/* About Decoration */
.about-decoration {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
gap: 20px;
}
.about-decoration .decoration-dot {
width: 12px;
height: 12px;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
animation: aboutDecorationPulse 2.5s ease-in-out infinite;
box-shadow: 0 0 20px rgba(20, 130, 85, 0.5);
}
/* Enhanced About Content */
.about-content {
padding-right: 60px;
position: relative;
z-index: 2;
}
.about-content .section-title {
font-size: 2.8rem;
font-weight: 700;
color: #333;
margin-bottom: 20px;
background: linear-gradient(135deg, #148255, #377f4b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: aboutTitleShimmer 3s ease-in-out infinite;
}
.about-content .section-description {
font-size: 1.1rem;
line-height: 1.8;
color: #666;
margin-bottom: 30px;
position: relative;
}
.about-content .section-description::before {
content: '';
position: absolute;
left: -20px;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 2px;
animation: aboutDescriptionLine 2s ease-in-out infinite;
}
/* Enhanced Feature Items */
.about-features {
margin: 40px 0;
}
.feature-item {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
padding: 20px;
border-radius: 15px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(20, 130, 85, 0.05), transparent);
transition: left 0.6s ease;
}
.feature-item:hover::before {
left: 100%;
}
.feature-item:hover {
background: rgba(20, 130, 85, 0.03);
transform: translateX(15px);
box-shadow: 0 10px 25px rgba(20, 130, 85, 0.1);
}
.feature-item .feature-icon {
position: relative;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
transition: all 0.4s ease;
box-shadow: 0 8px 20px rgba(20, 130, 85, 0.2);
}
.feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 30px rgba(20, 130, 85, 0.3);
}
.feature-item .icon-glow {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.4s ease;
}
.feature-item:hover .icon-glow {
transform: translate(-50%, -50%) scale(1);
}
.feature-item span {
font-weight: 600;
color: #333;
font-size: 1.05rem;
transition: all 0.3s ease;
}
.feature-item:hover span {
color: #148255;
}
/* Enhanced About Button */
.about-btn {
display: inline-flex;
align-items: center;
gap: 15px;
background: linear-gradient(45deg, #148255, #377f4b, #20c997);
color: white;
padding: 18px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 15px 35px rgba(20, 130, 85, 0.3),
0 8px 20px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.about-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.6s ease;
}
.about-btn:hover::before {
left: 100%;
}
.about-btn:hover {
transform: translateY(-5px);
box-shadow:
0 25px 50px rgba(20, 130, 85, 0.4),
0 15px 30px rgba(0, 0, 0, 0.15);
color: white;
text-decoration: none;
}
.about-btn .btn-glow {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.4s ease;
}
.about-btn:hover .btn-glow {
transform: translate(-50%, -50%) scale(1.5);
}
.about-btn i {
transition: transform 0.3s ease;
}
.about-btn:hover i {
transform: translateX(8px);
}
/* Enhanced About Image */
.about-image-wrapper {
position: relative;
z-index: 2;
}
.about-image {
position: relative;
border-radius: 25px;
overflow: hidden;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 15px 30px rgba(20, 130, 85, 0.1);
transition: all 0.4s ease;
}
.about-image:hover {
transform: translateY(-10px);
box-shadow:
0 35px 70px rgba(0, 0, 0, 0.2),
0 20px 40px rgba(20, 130, 85, 0.15);
}
.about-image img {
width: 100%;
height: auto;
transition: transform 0.6s ease;
}
.about-image:hover img {
transform: scale(1.1);
}
.about-image .image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(20, 130, 85, 0.1) 0%,
rgba(55, 127, 75, 0.05) 50%,
rgba(32, 201, 151, 0.1) 100%);
opacity: 0;
transition: all 0.4s ease;
}
.about-image:hover .image-overlay {
opacity: 1;
}
.about-image .image-border {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-radius: 25px;
background: linear-gradient(135deg, #148255, #377f4b) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: all 0.4s ease;
}
.about-image:hover .image-border {
opacity: 1;
}
/* Experience Badge */
.experience-badge {
position: absolute;
bottom: -30px;
right: -30px;
width: 120px;
height: 120px;
z-index: 3;
}
.experience-badge .badge-content {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
animation: experienceBadgePulse 3s ease-in-out infinite;
box-shadow:
0 15px 35px rgba(20, 130, 85, 0.3),
0 8px 20px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.experience-badge .badge-content::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: experienceBadgeRotate 4s linear infinite;
}
.experience-badge .badge-glow {
position: absolute;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: experienceBadgeGlow 2.5s ease-in-out infinite;
}
.experience-badge .years {
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
margin-bottom: 5px;
}
.experience-badge .text {
font-size: 0.8rem;
font-weight: 500;
line-height: 1.2;
}
/* Floating Elements */
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.float-element {
position: absolute;
width: 40px;
height: 40px;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
animation: floatElementFloat 20s linear infinite;
box-shadow: 0 8px 20px rgba(20, 130, 85, 0.2);
}
.float-1 {
top: 20%;
left: -20px;
animation-delay: 0s;
}
.float-2 {
top: 60%;
right: -20px;
animation-delay: 7s;
}
.float-3 {
bottom: 30%;
left: 10%;
animation-delay: 14s;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, #148255 0%, #377f4b 50%, #20c997 100%);
padding: 80px 0;
color: white;
text-align: center;
}
.cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.cta-description {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.cta-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: white;
color: #148255;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.cta-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
color: #148255;
text-decoration: none;
}
.cta-btn-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}
.cta-btn-secondary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
color: white;
text-decoration: none;
}
/* Animation Classes */
.stat-card.animate,
.service-card.animate,
.feature-card.animate,
.project-card.animate,
.testimonial-card.animate,
.team-card.animate,
.blog-card.animate,
.section-subtitle.animate,
.section-title.animate,
.section-description.animate {
animation: fadeInUp 0.8s ease-out forwards;
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero-title {
font-size: 3.5rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 992px) {
.hero-title {
font-size: 3rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-btn-primary,
.hero-btn-secondary {
width: 100%;
max-width: 300px;
justify-content: center;
}
.about-content {
padding-right: 0;
margin-bottom: 40px;
}
.contact-content {
padding-right: 0;
margin-bottom: 40px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-btn-primary,
.cta-btn-secondary {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-content {
padding: 80px 0;
}
.section-title {
font-size: 2rem;
}
.stat-card {
padding: 30px 15px;
}
.stat-number {
font-size: 2.5rem;
}
.stat-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.service-content {
padding: 20px;
}
.service-content h5 {
font-size: 1.3rem;
}
.feature-card {
padding: 30px 20px;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.project-content,
.blog-content {
padding: 20px;
}
.testimonial-card {
padding: 25px;
}
.team-content {
padding: 20px;
}
.contact-form-wrapper {
padding: 30px;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-content {
padding: 60px 0;
}
.section-title {
font-size: 1.8rem;
}
.section-description {
font-size: 1rem;
}
.stat-card {
padding: 25px 15px;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 1rem;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.service-content {
padding: 15px;
}
.service-content h5 {
font-size: 1.2rem;
}
.service-content p {
font-size: 0.9rem;
}
.cta-title {
font-size: 2rem;
}
.cta-description {
font-size: 1.1rem;
}
}
/* ===== END NEW CLEAN INDEX.HTML STYLES ===== */
/* ===== AMAZING HERO SECTION STYLES ===== */
/* Hero Section - Enhanced with Amazing Animations */
.hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0a1f1a 0%, #1a3d2e 25%, #148255 50%, #377f4b 75%, #20c997 100%);
overflow: hidden;
perspective: 1000px;
}
/* Animated Background Layers */
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../images/main-banner.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
opacity: 0.3;
animation: heroZoom 20s ease-in-out infinite;
}
@keyframes heroZoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(20, 130, 85, 0.9) 0%,
rgba(55, 127, 75, 0.8) 25%,
rgba(32, 201, 151, 0.7) 50%,
rgba(20, 130, 85, 0.8) 75%,
rgba(55, 127, 75, 0.9) 100%);
z-index: 2;
}
.hero-gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(32, 201, 151, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(20, 130, 85, 0.05) 0%, transparent 70%);
z-index: 3;
animation: gradientShift 15s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* Animated Geometric Shapes */
.hero-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
pointer-events: none;
}
.shape {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: shapeFloat 20s ease-in-out infinite;
}
.shape-1 {
width: 100px;
height: 100px;
top: 10%;
left: 10%;
animation-delay: 0s;
border-color: rgba(255, 215, 0, 0.3);
}
.shape-2 {
width: 150px;
height: 150px;
top: 20%;
right: 15%;
animation-delay: 3s;
border-color: rgba(32, 201, 151, 0.3);
}
.shape-3 {
width: 80px;
height: 80px;
bottom: 30%;
left: 20%;
animation-delay: 6s;
border-color: rgba(255, 255, 255, 0.2);
}
.shape-4 {
width: 120px;
height: 120px;
bottom: 20%;
right: 10%;
animation-delay: 9s;
border-color: rgba(20, 130, 85, 0.3);
}
.shape-5 {
width: 60px;
height: 60px;
top: 50%;
left: 5%;
animation-delay: 12s;
border-color: rgba(55, 127, 75, 0.3);
}
.shape-6 {
width: 90px;
height: 90px;
top: 60%;
right: 5%;
animation-delay: 15s;
border-color: rgba(255, 215, 0, 0.2);
}
@keyframes shapeFloat {
0%, 100% {
transform: translateY(0px) rotate(0deg) scale(1);
opacity: 0.3;
}
25% {
transform: translateY(-20px) rotate(90deg) scale(1.1);
opacity: 0.6;
}
50% {
transform: translateY(-10px) rotate(180deg) scale(0.9);
opacity: 0.4;
}
75% {
transform: translateY(-30px) rotate(270deg) scale(1.2);
opacity: 0.7;
}
}
/* Enhanced Floating Particles */
.hero-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
pointer-events: none;
}
.particle {
position: absolute;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 70%);
border-radius: 50%;
animation: particleFloat 12s infinite linear;
}
.particle-1 {
width: 6px;
height: 6px;
top: 15%;
left: 15%;
animation-delay: 0s;
animation-duration: 15s;
}
.particle-2 {
width: 4px;
height: 4px;
top: 25%;
right: 20%;
animation-delay: 2s;
animation-duration: 18s;
}
.particle-3 {
width: 8px;
height: 8px;
bottom: 35%;
left: 25%;
animation-delay: 4s;
animation-duration: 12s;
}
.particle-4 {
width: 5px;
height: 5px;
bottom: 25%;
right: 15%;
animation-delay: 6s;
animation-duration: 20s;
}
.particle-5 {
width: 7px;
height: 7px;
top: 45%;
left: 8%;
animation-delay: 8s;
animation-duration: 16s;
}
.particle-6 {
width: 3px;
height: 3px;
top: 55%;
right: 8%;
animation-delay: 10s;
animation-duration: 22s;
}
.particle-7 {
width: 6px;
height: 6px;
top: 70%;
left: 35%;
animation-delay: 12s;
animation-duration: 14s;
}
.particle-8 {
width: 4px;
height: 4px;
top: 80%;
right: 25%;
animation-delay: 14s;
animation-duration: 19s;
}
@keyframes particleFloat {
0% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-150px) translateX(50px) rotate(360deg);
opacity: 0;
}
}
/* Animated Grid Pattern */
.hero-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
opacity: 0.1;
}
.grid-line {
position: absolute;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: gridPulse 8s ease-in-out infinite;
}
.grid-line-1 {
top: 20%;
left: 0;
width: 100%;
height: 1px;
animation-delay: 0s;
}
.grid-line-2 {
top: 40%;
left: 0;
width: 100%;
height: 1px;
animation-delay: 2s;
}
.grid-line-3 {
top: 60%;
left: 0;
width: 100%;
height: 1px;
animation-delay: 4s;
}
.grid-line-4 {
top: 80%;
left: 0;
width: 100%;
height: 1px;
animation-delay: 6s;
}
@keyframes gridPulse {
0%, 100% { opacity: 0.1; transform: scaleX(0.8); }
50% { opacity: 0.3; transform: scaleX(1); }
}
/* Achievements Section - Amazing & Eye-catching */
.achievements-section {
background: white;
padding: 100px 0;
position: relative;
overflow: hidden;
}
/* Animated Background Pattern */
.achievements-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(20, 130, 85, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(55, 127, 75, 0.03) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(32, 201, 151, 0.02) 0%, transparent 50%);
animation: patternFloat 20s ease-in-out infinite;
}
@keyframes patternFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(1deg); }
}
/* Floating Particles */
.achievements-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.achievements-particles .particle {
position: absolute;
width: 6px;
height: 6px;
background: linear-gradient(45deg, #148255, #377f4b);
border-radius: 50%;
opacity: 0.6;
animation: particleFloat 15s linear infinite;
}
.particle-1 { top: 10%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 20%; right: 15%; animation-delay: 2s; }
.particle-3 { bottom: 30%; left: 20%; animation-delay: 4s; }
.particle-4 { bottom: 20%; right: 10%; animation-delay: 6s; }
.particle-5 { top: 50%; left: 5%; animation-delay: 8s; }
.particle-6 { top: 60%; right: 5%; animation-delay: 10s; }
@keyframes particleFloat {
0% { transform: translateY(0) scale(0); opacity: 0; }
10% { opacity: 0.6; transform: scale(1); }
90% { opacity: 0.6; }
100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}
/* Geometric Shapes */
.achievements-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.achievements-shapes .shape {
position: absolute;
opacity: 0.1;
animation: shapeRotate 25s linear infinite;
}
.shape-1 {
top: 15%;
left: 5%;
width: 40px;
height: 40px;
background: linear-gradient(45deg, #148255, #377f4b);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape-2 {
top: 25%;
right: 10%;
width: 30px;
height: 30px;
background: linear-gradient(45deg, #377f4b, #20c997);
border-radius: 50%;
}
.shape-3 {
bottom: 25%;
left: 8%;
width: 35px;
height: 35px;
background: linear-gradient(45deg, #20c997, #148255);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.shape-4 {
bottom: 15%;
right: 5%;
width: 45px;
height: 45px;
background: linear-gradient(45deg, #148255, #20c997);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
@keyframes shapeRotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.1); }
100% { transform: rotate(360deg) scale(1); }
}
/* Enhanced Achievements Header */
.achievements-header {
position: relative;
z-index: 2;
}
.achievements-badge {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 auto 25px;
position: relative;
}
.badge-inner {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #148255, #377f4b, #20c997);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 35px;
animation: badgePulse 3s ease-in-out infinite;
box-shadow:
0 15px 35px rgba(20, 130, 85, 0.4),
0 8px 20px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.badge-inner::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: badgeRotate 4s linear infinite;
}
.badge-glow {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: badgeGlow 2s ease-in-out infinite;
}
/* Achievements Decoration */
.achievements-decoration {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
gap: 20px;
}
.decoration-dot {
width: 12px;
height: 12px;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
animation: decorationPulse 2s ease-in-out infinite;
box-shadow: 0 0 20px rgba(20, 130, 85, 0.5);
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Achievement Cards - Ultra Enhanced & Amazing */
.achievement-card {
margin-bottom: 30px;
perspective: 1200px;
position: relative;
}
.card-inner {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 25px;
padding: 50px 30px;
text-align: center;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.1),
0 8px 20px rgba(20, 130, 85, 0.08);
border: 2px solid transparent;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
/* Card Background Pattern */
.card-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(20, 130, 85, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(55, 127, 75, 0.02) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s ease;
}
.achievement-card:hover .card-bg-pattern {
opacity: 1;
}
.card-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #148255, #377f4b, #20c997, #148255);
background-size: 200% 100%;
transform: scaleX(0);
transition: all 0.4s ease;
animation: gradientShift 3s ease-in-out infinite;
}
.card-inner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(20, 130, 85, 0.02) 0%,
rgba(55, 127, 75, 0.02) 50%,
rgba(32, 201, 151, 0.02) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.achievement-card:hover .card-inner {
transform: translateY(-12px) rotateX(8deg) rotateY(2deg);
box-shadow:
0 25px 50px rgba(20, 130, 85, 0.2),
0 15px 30px rgba(0, 0, 0, 0.15);
border-color: rgba(20, 130, 85, 0.3);
}
/* Card Sparkles */
.card-sparkles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.achievement-card:hover .card-sparkles {
opacity: 1;
}
.sparkle {
position: absolute;
width: 3px;
height: 3px;
background: #148255;
border-radius: 50%;
animation: sparkleTwinkle 1.5s ease-in-out infinite;
}
.sparkle-1 {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.sparkle-2 {
top: 30%;
right: 20%;
animation-delay: 0.5s;
}
.sparkle-3 {
bottom: 25%;
left: 25%;
animation-delay: 1s;
}
.achievement-card:hover .card-inner::before {
transform: scaleX(1);
}
.achievement-card:hover .card-inner::after {
opacity: 1;
}
/* Achievement Glow Effect */
.achievement-glow {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.4s ease;
pointer-events: none;
}
.achievement-card:hover .achievement-glow {
transform: translate(-50%, -50%) scale(2);
opacity: 0.8;
}
/* Achievement Icon - Ultra Enhanced Design */
.achievement-icon {
width: 90px;
height: 90px;
margin: 0 auto 30px;
position: relative;
z-index: 2;
}
.icon-ring {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 2px solid transparent;
border-radius: 50%;
background: linear-gradient(135deg, #148255, #377f4b, #20c997) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: all 0.4s ease;
animation: iconRingRotate 3s linear infinite;
}
.icon-core {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 36px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 10px 30px rgba(20, 130, 85, 0.3),
0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.icon-core::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: iconShine 2s linear infinite;
}
.icon-particles {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
}
.icon-particles span {
position: absolute;
width: 4px;
height: 4px;
background: #148255;
border-radius: 50%;
animation: iconParticleFloat 3s ease-in-out infinite;
}
.icon-particles span:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.icon-particles span:nth-child(2) {
top: 20%;
right: 15%;
animation-delay: 1s;
}
.icon-particles span:nth-child(3) {
bottom: 20%;
left: 20%;
animation-delay: 2s;
}
.achievement-card:hover .icon-ring {
opacity: 1;
transform: scale(1.2);
}
.achievement-card:hover .icon-core {
background: linear-gradient(135deg, #377f4b, #20c997);
transform: scale(1.1);
box-shadow:
0 20px 40px rgba(20, 130, 85, 0.4),
0 10px 25px rgba(0, 0, 0, 0.15);
}
.achievement-card:hover .icon-particles span {
animation: iconParticleFloat 1.5s ease-in-out infinite;
}
/* Achievement Numbers - Enhanced Design */
.achievement-number {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(135deg, #148255, #377f4b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
line-height: 1;
transition: all 0.4s ease;
position: relative;
z-index: 2;
}
.achievement-number::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, #148255, #377f4b);
transform: translateX(-50%);
transition: width 0.4s ease;
}
.achievement-card:hover .achievement-number {
transform: scale(1.1);
text-shadow: 0 0 20px rgba(20, 130, 85, 0.3);
}
.achievement-card:hover .achievement-number::after {
width: 60px;
}
/* Achievement Labels - Enhanced Design */
.achievement-label {
font-size: 1.1rem;
color: #555;
font-weight: 600;
margin-bottom: 20px;
transition: all 0.4s ease;
position: relative;
z-index: 2;
}
.achievement-card:hover .achievement-label {
color: #148255;
transform: translateY(-2px);
}
/* Enhanced Progress Bars */
.achievement-progress {
width: 100%;
height: 6px;
background: rgba(20, 130, 85, 0.1);
border-radius: 3px;
overflow: hidden;
position: relative;
margin-top: 15px;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #148255, #377f4b, #20c997);
border-radius: 3px;
width: 0;
transition: width 2s ease-in-out;
position: relative;
overflow: hidden;
}
.progress-bar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: progressShimmer 2s infinite;
}
.achievement-card:hover .progress-bar {
width: 100%;
}
/* Animations */
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Enhanced Animations */
@keyframes badgeRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes badgeGlow {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.6;
}
}
@keyframes decorationPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 20px rgba(20, 130, 85, 0.5);
}
50% {
transform: scale(1.3);
box-shadow: 0 0 30px rgba(20, 130, 85, 0.8);
}
}
@keyframes iconRingRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes iconShine {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes iconParticleFloat {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.6;
}
50% {
transform: translateY(-10px) scale(1.2);
opacity: 1;
}
}
@keyframes sparkleTwinkle {
0%, 100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
@keyframes iconGlow {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
@keyframes progressShimmer {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
/* Staggered Animation for Cards */
.achievement-card:nth-child(1) { animation-delay: 0.1s; }
.achievement-card:nth-child(2) { animation-delay: 0.2s; }
.achievement-card:nth-child(3) { animation-delay: 0.3s; }
.achievement-card:nth-child(4) { animation-delay: 0.4s; }
.achievement-card {
animation: cardFloat 0.6s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.achievement-number.animated {
animation: none;
}
@keyframes cardFloat {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design for Achievement Cards */
@media (max-width: 768px) {
.achievement-card {
margin-bottom: 20px;
}
.card-inner {
padding: 35px 25px;
border-radius: 16px;
}
.achievement-icon {
width: 70px;
height: 70px;
font-size: 28px;
margin-bottom: 20px;
}
.achievement-number {
font-size: 3rem;
}
.achievement-label {
font-size: 1rem;
}
.achievement-card:hover .card-inner {
transform: translateY(-5px) rotateX(2deg);
}
.achievement-card:hover .achievement-icon {
transform: scale(1.1) rotateY(5deg);
}
}
@media (max-width: 576px) {
.card-inner {
padding: 30px 20px;
border-radius: 12px;
}
.achievement-icon {
width: 60px;
height: 60px;
font-size: 24px;
margin-bottom: 15px;
}
.achievement-number {
font-size: 2.5rem;
margin-bottom: 10px;
}
.achievement-label {
font-size: 0.9rem;
margin-bottom: 15px;
}
.achievement-progress {
height: 4px;
margin-top: 10px;
}
.achievement-card:hover .card-inner {
transform: translateY(-3px);
}
.achievement-card:hover .achievement-icon {
transform: scale(1.05);
}
}
/* ===== AMAZING WHY CHOOSE US SECTION ===== */
/* Enhanced Why Choose Us Section */
.why-choose-section {
background: #ffffff;
padding: 100px 0;
position: relative;
}
/* Why Choose Header */
.why-choose-header {
position: relative;
z-index: 2;
margin-bottom: 60px;
}
.why-choose-badge {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 auto 30px;
position: relative;
}
.why-choose-badge .badge-inner {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #148255, #377f4b, #20c997);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 36px;
animation: whyChooseBadgePulse 4s ease-in-out infinite;
box-shadow:
0 20px 40px rgba(20, 130, 85, 0.3),
0 10px 25px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.why-choose-badge .badge-inner::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: whyChooseBadgeRotate 5s linear infinite;
}
.why-choose-badge .badge-glow {
position: absolute;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.2) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: whyChooseBadgeGlow 3s ease-in-out infinite;
}
/* Why Choose Decoration */
.why-choose-decoration {
display: flex;
align-items: center;
justify-content: center;
margin-top: 35px;
gap: 25px;
}
.why-choose-decoration .decoration-dot {
width: 15px;
height: 15px;
background: linear-gradient(135deg, #148255, #377f4b);
border-radius: 50%;
animation: whyChooseDecorationPulse 3s ease-in-out infinite;
box-shadow: 0 0 25px rgba(20, 130, 85, 0.6);
}
/* Enhanced Feature Cards */
.feature-card {
margin-bottom: 30px;
perspective: 1200px;
}
.feature-card .card-inner {
background: white;
border-radius: 25px;
padding: 40px 30px;
text-align: center;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.08),
0 8px 20px rgba(20, 130, 85, 0.05);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
transform-style: preserve-3d;
height: 100%;
overflow: hidden;
}
.feature-card:hover .card-inner {
transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
box-shadow:
0 30px 60px rgba(20, 130, 85, 0.15),
0 15px 35px rgba(0, 0, 0, 0.1);
}
/* Card Background Pattern */
.card-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 20%, rgba(20, 130, 85, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(55, 127, 75, 0.02) 0%, transparent 50%);
opacity: 0;
transition: all 0.4s ease;
pointer-events: none;
}
.feature-card:hover .card-bg-pattern {
opacity: 1;
}
/* Enhanced Feature Icons */
.feature-icon {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-ring {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-radius: 50%;
background: linear-gradient(135deg, #148255, #377f4b) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
animation: iconRingRotate 8s linear infinite;
}
.icon-core {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #148255, #377f4b, #20c997);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
position: relative;
z-index: 2;
transition: all 0.4s ease;
box-shadow:
0 10px 25px rgba(20, 130, 85, 0.3),
0 5px 15px rgba(0, 0, 0, 0.1);
}
.icon-core::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: iconShine 4s linear infinite;
}
.feature-card:hover .icon-core {
transform: scale(1.1);
box-shadow:
0 15px 35px rgba(20, 130, 85, 0.4),
0 8px 20px rgba(0, 0, 0, 0.15);
}
.icon-particles {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.icon-particles span {
position: absolute;
width: 4px;
height: 4px;
background: #148255;
border-radius: 50%;
animation: iconParticleFloat 3s ease-in-out infinite;
}
.icon-particles span:nth-child(1) {
top: 0;
left: 50%;
animation-delay: 0s;
}
.icon-particles span:nth-child(2) {
top: 50%;
right: 0;
animation-delay: 1s;
}
.icon-particles span:nth-child(3) {
bottom: 0;
left: 50%;
animation-delay: 2s;
}
.feature-card:hover .icon-ring {
animation: iconRingRotate 4s linear infinite;
}
.feature-card:hover .icon-particles span {
animation: iconParticleFloat 1.5s ease-in-out infinite;
}
/* Feature Content */
.feature-card h5 {
font-size: 1.5rem;
font-weight: 700;
color: #333;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.feature-card:hover h5 {
color: #148255;
transform: translateY(-2px);
}
.feature-card p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
font-size: 0.95rem;
}
/* Feature Stats */
.feature-stats {
margin-top: 20px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: #148255;
transition: all 0.3s ease;
}
.stat-label {
font-size: 0.9rem;
color: #666;
font-weight: 500;
}
.feature-card:hover .stat-number {
transform: scale(1.1);
color: #377f4b;
}
/* Card Effects */
.card-glow {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(20, 130, 85, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: all 0.4s ease;
pointer-events: none;
}
.feature-card:hover .card-glow {
transform: translate(-50%, -50%) scale(2.5);
opacity: 0.8;
}
.card-sparkles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.feature-card:hover .card-sparkles {
opacity: 1;
}
.card-sparkles .sparkle {
position: absolute;
width: 3px;
height: 3px;
background: #148255;
border-radius: 50%;
animation: sparkleTwinkle 2s ease-in-out infinite;
}
.card-sparkles .sparkle-1 {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.card-sparkles .sparkle-2 {
top: 30%;
right: 20%;
animation-delay: 0.5s;
}
.card-sparkles .sparkle-3 {
bottom: 25%;
left: 25%;
animation-delay: 1s;
}
@keyframes whyChooseBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@keyframes whyChooseBadgeRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes whyChooseBadgeGlow {
0%, 100% {
opacity: 0.2;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1.4);
}
}
@keyframes whyChooseDecorationPulse {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
/* Responsive Design for Why Choose Us */
@media (max-width: 768px) {
.why-choose-section {
padding: 80px 0;
}
.why-choose-badge {
width: 80px;
height: 80px;
margin-bottom: 25px;
}
.why-choose-badge .badge-inner {
font-size: 28px;
}
.feature-card .card-inner {
padding: 30px 25px;
border-radius: 20px;
}
.feature-icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.icon-core {
width: 60px;
height: 60px;
font-size: 24px;
}
.feature-card h5 {
font-size: 1.3rem;
}
.stat-number {
font-size: 1.8rem;
}
}
@media (max-width: 576px) {
.why-choose-section {
padding: 60px 0;
}
.why-choose-badge {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.why-choose-badge .badge-inner {
font-size: 24px;
}
.why-choose-decoration {
gap: 15px;
margin-top: 25px;
}
.why-choose-decoration .decoration-line {
width: 50px;
height: 2px;
}
.feature-card .card-inner {
padding: 25px 20px;
border-radius: 16px;
}
.feature-icon {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.icon-core {
width: 50px;
height: 50px;
font-size: 20px;
}
.feature-card h5 {
font-size: 1.2rem;
margin-bottom: 12px;
}
.feature-card p {
font-size: 0.9rem;
margin-bottom: 15px;
}
.stat-number {
font-size: 1.6rem;
}
.stat-label {
font-size: 0.8rem;
}
.feature-card:hover .card-inner {
transform: translateY(-8px) rotateX(3deg) rotateY(3deg);
}
}
/* ============== News Section Styles =============== */
.news-section {
background: #ffffff !important;
position: relative !important;
overflow: hidden !important;
padding: 100px 0 !important;
}
.news-bg-pattern {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background:
radial-gradient(circle at 30% 70%, rgba(20, 130, 85, 0.03) 0%, transparent 50%) !important,
radial-gradient(circle at 70% 30%, rgba(143, 145, 147, 0.03) 0%, transparent 50%) !important,
linear-gradient(135deg, transparent 48%, rgba(20, 130, 85, 0.02) 50%, transparent 52%) !important;
background-size: 100% 100%, 100% 100%, 80px 80px !important;
animation: newsPatternFloat 30s ease-in-out infinite !important;
}
@keyframes newsPatternFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(1deg); }
}
.news-particles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.news-particles .particle {
position: absolute !important;
background: linear-gradient(45deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% !important;
opacity: 0.3 !important;
animation: newsParticleFloat var(--duration) ease-in-out infinite !important;
animation-delay: var(--delay) !important;
width: var(--size) !important;
height: var(--size) !important;
}
.news-particles .particle:nth-child(1) { top: 20%; left: 10%; }
.news-particles .particle:nth-child(2) { top: 60%; left: 80%; }
.news-particles .particle:nth-child(3) { top: 80%; left: 20%; }
.news-particles .particle:nth-child(4) { top: 30%; left: 70%; }
.news-particles .particle:nth-child(5) { top: 70%; left: 30%; }
.news-particles .particle:nth-child(6) { top: 40%; left: 90%; }
@keyframes newsParticleFloat {
0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
50% { transform: translateY(-30px) translateX(20px); opacity: 0.6; }
}
.news-shapes {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.news-shapes .shape {
position: absolute !important;
opacity: 0.1 !important;
animation: newsShapeFloat 25s ease-in-out infinite !important;
}
.news-shapes .shape-1 {
top: 15% !important;
left: 5% !important;
width: 60px !important;
height: 60px !important;
background: linear-gradient(45deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% !important;
animation-delay: 0s !important;
}
.news-shapes .shape-2 {
top: 75% !important;
right: 10% !important;
width: 40px !important;
height: 40px !important;
background: linear-gradient(45deg, var(--secendary-color), var(--primary-color)) !important;
border-radius: 8px !important;
animation-delay: 5s !important;
}
.news-shapes .shape-3 {
top: 45% !important;
left: 85% !important;
width: 50px !important;
height: 50px !important;
background: linear-gradient(45deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% 50% 0 50% !important;
animation-delay: 10s !important;
}
.news-shapes .shape-4 {
top: 85% !important;
left: 15% !important;
width: 35px !important;
height: 35px !important;
background: linear-gradient(45deg, var(--secendary-color), var(--primary-color)) !important;
border-radius: 8px !important;
animation-delay: 15s !important;
}
@keyframes newsShapeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
50% { transform: translateY(-25px) rotate(180deg); opacity: 0.2; }
}
.news-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 25px !important;
font-size: 14px !important;
font-weight: 600 !important;
margin-bottom: 20px !important;
box-shadow: 0 4px 15px rgba(20, 130, 85, 0.3) !important;
animation: newsBadgePulse 3s ease-in-out infinite !important;
}
.news-badge i {
font-size: 16px !important;
animation: newsBadgeRotate 4s linear infinite !important;
}
@keyframes newsBadgePulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(20, 130, 85, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(20, 130, 85, 0.4); }
}
@keyframes newsBadgeRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.news-decorative {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 15px !important;
margin-top: 30px !important;
}
.news-decorative .decor-dots {
display: flex !important;
gap: 8px !important;
}
.news-decorative .decor-dots span {
width: 8px !important;
height: 8px !important;
background: var(--primary-color) !important;
border-radius: 50% !important;
animation: newsDotPulse 2s ease-in-out infinite !important;
}
.news-decorative .decor-dots span:nth-child(2) { animation-delay: 0.5s !important; }
.news-decorative .decor-dots span:nth-child(3) { animation-delay: 1s !important; }
@keyframes newsDotPulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.3); opacity: 1; }
}
.news-card {
position: relative !important;
height: 100% !important;
transition: all 0.4s ease !important;
}
.news-card .card-inner {
position: relative !important;
background: white !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
transition: all 0.4s ease !important;
height: 100% !important;
}
.news-card:hover .card-inner {
transform: translateY(-10px) !important;
box-shadow: 0 20px 40px rgba(20, 130, 85, 0.15) !important;
}
.news-image {
position: relative !important;
height: 200px !important;
overflow: hidden !important;
}
.news-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.4s ease !important;
}
.news-card:hover .news-image img {
transform: scale(1.1) !important;
}
.news-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.8), rgba(143, 145, 147, 0.8)) !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 20px !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
}
.news-card:hover .news-overlay {
opacity: 1 !important;
}
.news-category {
display: flex !important;
align-items: center !important;
gap: 8px !important;
background: rgba(255, 255, 255, 0.9) !important;
color: var(--primary-color) !important;
padding: 6px 12px !important;
border-radius: 15px !important;
font-size: 12px !important;
font-weight: 600 !important;
align-self: flex-start !important;
}
.news-date {
display: flex !important;
align-items: center !important;
gap: 6px !important;
color: white !important;
font-size: 12px !important;
align-self: flex-end !important;
}
.news-sparkles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.news-sparkles .sparkle {
position: absolute !important;
width: 4px !important;
height: 4px !important;
background: white !important;
border-radius: 50% !important;
opacity: 0 !important;
animation: newsSparkle 3s ease-in-out infinite !important;
}
.news-sparkles .sparkle:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.news-sparkles .sparkle:nth-child(2) { top: 60%; right: 30%; animation-delay: 1s; }
.news-sparkles .sparkle:nth-child(3) { bottom: 30%; left: 40%; animation-delay: 2s; }
@keyframes newsSparkle {
0%, 100% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
}
.news-content {
padding: 25px !important;
display: flex !important;
flex-direction: column !important;
height: calc(100% - 200px) !important;
}
.news-meta {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 15px !important;
font-size: 12px !important;
color: #666 !important;
}
.news-meta span {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.news-meta i {
color: var(--primary-color) !important;
}
.news-title {
font-size: 18px !important;
font-weight: 700 !important;
color: #333 !important;
margin-bottom: 12px !important;
line-height: 1.4 !important;
transition: color 0.3s ease !important;
}
.news-card:hover .news-title {
color: var(--primary-color) !important;
}
.news-excerpt {
color: #666 !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-bottom: 15px !important;
flex-grow: 1 !important;
}
.news-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 20px !important;
}
.news-tags .tag {
background: rgba(20, 130, 85, 0.1) !important;
color: var(--primary-color) !important;
padding: 4px 10px !important;
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.news-card:hover .news-tags .tag {
background: rgba(20, 130, 85, 0.2) !important;
transform: translateY(-2px) !important;
}
.news-link {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
color: var(--primary-color) !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 12px 0 !important;
border-top: 1px solid #eee !important;
transition: all 0.3s ease !important;
margin-top: auto !important;
}
.news-link:hover {
color: var(--secendary-color) !important;
transform: translateX(5px) !important;
}
.news-link i {
transition: transform 0.3s ease !important;
}
.news-link:hover i {
transform: translateX(5px) !important;
}
.card-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.1), rgba(143, 145, 147, 0.1)) !important;
border-radius: 20px !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
pointer-events: none !important;
}
.news-card:hover .card-glow {
opacity: 1 !important;
}
.news-view-all-btn {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
text-decoration: none !important;
padding: 15px 30px !important;
border-radius: 30px !important;
font-weight: 600 !important;
font-size: 16px !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
box-shadow: 0 8px 25px rgba(20, 130, 85, 0.3) !important;
}
.news-view-all-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 35px rgba(20, 130, 85, 0.4) !important;
color: white !important;
}
.news-view-all-btn::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
transition: left 0.5s ease !important;
}
.news-view-all-btn:hover::before {
left: 100% !important;
}
.news-view-all-btn .btn-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.3), rgba(143, 145, 147, 0.3)) !important;
border-radius: 30px !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
filter: blur(10px) !important;
}
.news-view-all-btn:hover .btn-glow {
opacity: 1 !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.news-section {
padding: 60px 0 !important;
}
.news-card .card-inner {
margin-bottom: 20px !important;
}
.news-content {
padding: 20px !important;
}
.news-title {
font-size: 16px !important;
}
.news-view-all-btn {
padding: 12px 25px !important;
font-size: 14px !important;
}
}
/* ============== Projects Section Styles =============== */
.projects-section {
background: #ffffff !important;
position: relative !important;
overflow: hidden !important;
padding: 100px 0 !important;
}
.projects-bg-pattern {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background:
radial-gradient(circle at 20% 80%, rgba(34, 197, 94, 0.03) 0%, transparent 50%) !important,
radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.03) 0%, transparent 50%) !important,
linear-gradient(45deg, transparent 48%, rgba(34, 197, 94, 0.02) 50%, transparent 52%) !important;
background-size: 100% 100%, 100% 100%, 60px 60px !important;
animation: projectsBgFloat 20s ease-in-out infinite !important;
}
.projects-particles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.projects-particles .particle {
position: absolute !important;
width: 6px !important;
height: 6px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% !important;
opacity: 0.6 !important;
animation: projectsParticleFloat 15s linear infinite !important;
}
.particle-1 { top: 15%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 25%; right: 20%; animation-delay: 3s; }
.particle-3 { bottom: 30%; left: 15%; animation-delay: 6s; }
.particle-4 { bottom: 20%; right: 10%; animation-delay: 9s; }
.particle-5 { top: 60%; left: 5%; animation-delay: 12s; }
.particle-6 { top: 40%; right: 5%; animation-delay: 15s; }
.projects-shapes {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.projects-shapes .shape {
position: absolute !important;
opacity: 0.1 !important;
animation: projectsShapeFloat 25s ease-in-out infinite !important;
}
.shape-1 {
width: 80px !important;
height: 80px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% !important;
top: 10% !important;
left: 5% !important;
animation-delay: 0s !important;
}
.shape-2 {
width: 60px !important;
height: 60px !important;
background: linear-gradient(135deg, var(--secendary-color), var(--primary-color)) !important;
border-radius: 20px !important;
top: 20% !important;
right: 10% !important;
animation-delay: 5s !important;
}
.shape-3 {
width: 100px !important;
height: 100px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 30px !important;
bottom: 15% !important;
left: 10% !important;
animation-delay: 10s !important;
}
.shape-4 {
width: 70px !important;
height: 70px !important;
background: linear-gradient(135deg, var(--secendary-color), var(--primary-color)) !important;
border-radius: 50% !important;
bottom: 25% !important;
right: 15% !important;
animation-delay: 15s !important;
}
.projects-header {
position: relative !important;
z-index: 2 !important;
}
.projects-badge {
display: inline-block !important;
margin-bottom: 20px !important;
position: relative !important;
}
.projects-badge .badge-inner {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
padding: 15px 25px !important;
border-radius: 30px !important;
font-weight: 600 !important;
font-size: 14px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
position: relative !important;
overflow: hidden !important;
animation: projectsBadgePulse 3s ease-in-out infinite !important;
}
.projects-badge .badge-inner::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
animation: projectsBadgeShine 4s ease-in-out infinite !important;
}
.projects-badge .badge-glow {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 120% !important;
height: 120% !important;
background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, transparent 70%) !important;
border-radius: 50% !important;
animation: projectsBadgeGlow 3s ease-in-out infinite !important;
}
.projects-decoration {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
margin-top: 30px !important;
}
.projects-decoration .decoration-dot {
width: 8px !important;
height: 8px !important;
background: var(--primary-color) !important;
border-radius: 50% !important;
animation: projectsDecorationPulse 2s ease-in-out infinite !important;
}
/* Enhanced Project Cards */
.project-card {
background: transparent !important;
border-radius: 20px !important;
overflow: hidden !important;
transition: all 0.4s ease !important;
margin-bottom: 30px !important;
position: relative !important;
height: 100% !important;
}
.project-card .card-inner {
background: white !important;
border-radius: 20px !important;
overflow: hidden !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
transition: all 0.4s ease !important;
position: relative !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.project-card:hover .card-inner {
transform: translateY(-15px) !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}
.card-bg-pattern {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background:
radial-gradient(circle at 20% 80%, rgba(34, 197, 94, 0.02) 0%, transparent 50%) !important,
radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.02) 0%, transparent 50%) !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
}
.project-card:hover .card-bg-pattern {
opacity: 1 !important;
}
.project-image {
position: relative !important;
overflow: hidden !important;
height: 200px !important;
}
.project-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: all 0.4s ease !important;
}
.project-card:hover .project-image img {
transform: scale(1.1) !important;
}
.project-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(16, 185, 129, 0.9)) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
transition: all 0.4s ease !important;
}
.project-card:hover .project-overlay {
opacity: 1 !important;
}
.overlay-content {
text-align: center !important;
color: white !important;
}
.project-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 50px !important;
height: 50px !important;
background: rgba(255, 255, 255, 0.2) !important;
border-radius: 50% !important;
color: white !important;
text-decoration: none !important;
font-size: 18px !important;
transition: all 0.3s ease !important;
backdrop-filter: blur(10px) !important;
}
.project-link:hover {
background: rgba(255, 255, 255, 0.3) !important;
transform: scale(1.1) !important;
color: white !important;
}
.project-badge {
position: absolute !important;
top: 15px !important;
right: 15px !important;
background: rgba(255, 255, 255, 0.9) !important;
color: var(--primary-color) !important;
padding: 5px 12px !important;
border-radius: 15px !important;
font-size: 12px !important;
font-weight: 600 !important;
backdrop-filter: blur(10px) !important;
z-index: 2 !important;
}
.project-content {
padding: 25px !important;
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
}
.project-category {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 15px !important;
color: var(--primary-color) !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.project-category i {
font-size: 16px !important;
}
.project-content h5 {
font-size: 18px !important;
font-weight: 700 !important;
color: #333 !important;
margin-bottom: 12px !important;
line-height: 1.3 !important;
transition: color 0.3s ease !important;
}
.project-card:hover .project-content h5 {
color: var(--primary-color) !important;
}
.project-content p {
font-size: 14px !important;
line-height: 1.6 !important;
color: #666 !important;
margin-bottom: 20px !important;
flex-grow: 1 !important;
}
.project-meta {
display: flex !important;
justify-content: space-between !important;
margin-bottom: 20px !important;
font-size: 12px !important;
color: #888 !important;
}
.project-meta span {
display: flex !important;
align-items: center !important;
gap: 5px !important;
}
.project-stats {
display: flex !important;
justify-content: space-between !important;
margin-top: auto !important;
}
.project-stats .stat-item {
text-align: center !important;
flex: 1 !important;
}
.project-stats .stat-number {
display: block !important;
font-size: 20px !important;
font-weight: 700 !important;
color: var(--primary-color) !important;
margin-bottom: 5px !important;
}
.project-stats .stat-label {
font-size: 12px !important;
color: #888 !important;
font-weight: 500 !important;
}
.card-glow {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100% !important;
height: 100% !important;
background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%) !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
pointer-events: none !important;
}
.project-card:hover .card-glow {
opacity: 1 !important;
}
.card-sparkles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
}
.project-card:hover .card-sparkles {
opacity: 1 !important;
}
.card-sparkles .sparkle {
position: absolute !important;
width: 4px !important;
height: 4px !important;
background: var(--primary-color) !important;
border-radius: 50% !important;
animation: projectsSparkleTwinkle 2s ease-in-out infinite !important;
}
.card-sparkles .sparkle-1 {
top: 20% !important;
left: 20% !important;
animation-delay: 0s !important;
}
.card-sparkles .sparkle-2 {
top: 30% !important;
right: 25% !important;
animation-delay: 0.5s !important;
}
.card-sparkles .sparkle-3 {
bottom: 30% !important;
left: 30% !important;
animation-delay: 1s !important;
}
.view-all-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
padding: 15px 35px !important;
border-radius: 30px !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 16px !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
margin-top: 20px !important;
}
.view-all-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 15px 35px rgba(34, 197, 94, 0.3) !important;
color: white !important;
}
.view-all-btn .btn-glow {
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
transition: left 0.5s ease !important;
}
.view-all-btn:hover .btn-glow {
left: 100% !important;
}
.view-all-btn i {
transition: transform 0.3s ease !important;
}
.view-all-btn:hover i {
transform: translateX(5px) !important;
}
/* Animations */
@keyframes projectsBgFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(1deg); }
}
@keyframes projectsParticleFloat {
0% { transform: translateY(0px) translateX(0px); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}
@keyframes projectsShapeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-30px) rotate(180deg); }
}
@keyframes projectsBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes projectsBadgeShine {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes projectsBadgeGlow {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes projectsDecorationPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes projectsSparkleTwinkle {
0%, 100% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1); }
}
/* Responsive Design */
@media (max-width: 768px) {
.projects-section {
padding: 80px 0 !important;
}
.projects-badge .badge-inner {
padding: 12px 20px !important;
font-size: 13px !important;
}
.project-card .card-inner {
border-radius: 15px !important;
}
.project-image {
height: 180px !important;
}
.project-content {
padding: 20px !important;
}
.project-content h5 {
font-size: 16px !important;
}
.project-stats .stat-number {
font-size: 18px !important;
}
.view-all-btn {
padding: 12px 25px !important;
font-size: 14px !important;
}
}
@media (max-width: 576px) {
.projects-section {
padding: 60px 0 !important;
}
.projects-badge .badge-inner {
padding: 10px 15px !important;
font-size: 12px !important;
}
.projects-decoration .decoration-line {
width: 40px !important;
}
.project-card .card-inner {
border-radius: 12px !important;
}
.project-image {
height: 160px !important;
}
.project-content {
padding: 15px !important;
}
.project-content h5 {
font-size: 15px !important;
}
.project-content p {
font-size: 13px !important;
}
.project-meta {
flex-direction: column !important;
gap: 5px !important;
}
.project-stats {
flex-direction: column !important;
gap: 10px !important;
}
.project-stats .stat-item {
text-align: left !important;
}
.view-all-btn {
padding: 10px 20px !important;
font-size: 13px !important;
}
}
/* ============== Contact Section Styles =============== */
.contact-section {
background: #f8f9fa !important;
position: relative !important;
overflow: hidden !important;
padding: 60px 0 !important;
}
.contact-bg-pattern {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: transparent !important;
}
@keyframes contactPatternFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-25px) rotate(1deg); }
}
.contact-particles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.contact-particles .particle {
display: none !important;
}
.contact-particles .particle:nth-child(1) { top: 15%; left: 15%; }
.contact-particles .particle:nth-child(2) { top: 65%; left: 85%; }
.contact-particles .particle:nth-child(3) { top: 85%; left: 25%; }
.contact-particles .particle:nth-child(4) { top: 35%; left: 75%; }
.contact-particles .particle:nth-child(5) { top: 75%; left: 35%; }
.contact-particles .particle:nth-child(6) { top: 45%; left: 85%; }
@keyframes contactParticleFloat {
0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.2; }
50% { transform: translateY(-40px) translateX(30px); opacity: 0.5; }
}
.contact-shapes {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.contact-shapes .shape {
display: none !important;
}
.contact-shapes .shape-1 {
top: 20% !important;
left: 10% !important;
width: 70px !important;
height: 70px !important;
background: linear-gradient(45deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% !important;
animation-delay: 0s !important;
}
.contact-shapes .shape-2 {
top: 80% !important;
right: 15% !important;
width: 45px !important;
height: 45px !important;
background: linear-gradient(45deg, var(--secendary-color), var(--primary-color)) !important;
border-radius: 10px !important;
animation-delay: 7s !important;
}
.contact-shapes .shape-3 {
top: 50% !important;
left: 80% !important;
width: 55px !important;
height: 55px !important;
background: linear-gradient(45deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 50% 50% 0 50% !important;
animation-delay: 14s !important;
}
.contact-shapes .shape-4 {
top: 90% !important;
left: 20% !important;
width: 40px !important;
height: 40px !important;
background: linear-gradient(45deg, var(--secendary-color), var(--primary-color)) !important;
border-radius: 10px !important;
animation-delay: 21s !important;
}
@keyframes contactShapeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.08; }
50% { transform: translateY(-35px) rotate(180deg); opacity: 0.15; }
}
.contact-badge {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 25px !important;
font-size: 14px !important;
font-weight: 600 !important;
margin-bottom: 20px !important;
box-shadow: 0 4px 15px rgba(20, 130, 85, 0.3) !important;
animation: contactBadgePulse 3s ease-in-out infinite !important;
}
.contact-badge i {
font-size: 16px !important;
animation: contactBadgeRotate 4s linear infinite !important;
}
@keyframes contactBadgePulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(20, 130, 85, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(20, 130, 85, 0.4); }
}
@keyframes contactBadgeRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.contact-decorative {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 15px !important;
margin-top: 30px !important;
}
.contact-decorative .decor-dots {
display: flex !important;
gap: 8px !important;
}
.contact-decorative .decor-dots span {
width: 8px !important;
height: 8px !important;
background: var(--primary-color) !important;
border-radius: 50% !important;
animation: contactDotPulse 2s ease-in-out infinite !important;
}
.contact-decorative .decor-dots span:nth-child(2) { animation-delay: 0.5s !important; }
.contact-decorative .decor-dots span:nth-child(3) { animation-delay: 1s !important; }
@keyframes contactDotPulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.3); opacity: 1; }
}
.contact-info-card, .contact-form-card {
position: relative !important;
height: 100% !important;
transition: all 0.4s ease !important;
}
.contact-info-card .card-inner, .contact-form-card .card-inner {
position: relative !important;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border-radius: 30px !important;
overflow: hidden !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
transition: all 0.4s ease !important;
height: 100% !important;
padding: 40px !important;
border: 1px solid rgba(30, 194, 139, 0.1) !important;
}
.contact-info-card:hover .card-inner, .contact-form-card:hover .card-inner {
transform: translateY(-15px) !important;
box-shadow: 0 35px 80px rgba(30, 194, 139, 0.15) !important;
}
/* Animated Background Elements */
.contact-bg-pattern {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background:
radial-gradient(circle at 20% 80%, rgba(30, 194, 139, 0.03) 0%, transparent 50%) !important,
radial-gradient(circle at 80% 20%, rgba(45, 212, 163, 0.03) 0%, transparent 50%) !important,
linear-gradient(135deg, transparent 48%, rgba(30, 194, 139, 0.02) 50%, transparent 52%) !important;
background-size: 100% 100%, 100% 100%, 60px 60px !important;
animation: contactPatternFloat 30s ease-in-out infinite !important;
}
.contact-particles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.contact-particles .particle {
position: absolute !important;
background: linear-gradient(45deg, #1ec28b, #204d40) !important;
border-radius: 50% !important;
opacity: 0.4 !important;
animation: contactParticleFloat var(--duration, 20s) ease-in-out infinite !important;
animation-delay: var(--delay, 0s) !important;
width: var(--size, 4px) !important;
height: var(--size, 4px) !important;
}
.contact-particles .particle-1 { top: 15%; left: 10%; --delay: 0s; --duration: 25s; --size: 6px; }
.contact-particles .particle-2 { top: 65%; left: 85%; --delay: 5s; --duration: 30s; --size: 4px; }
.contact-particles .particle-3 { top: 85%; left: 25%; --delay: 10s; --duration: 22s; --size: 5px; }
.contact-particles .particle-4 { top: 35%; left: 75%; --delay: 15s; --duration: 28s; --size: 3px; }
.contact-shapes {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.contact-shapes .shape {
position: absolute !important;
opacity: 0.1 !important;
animation: contactShapeFloat 25s ease-in-out infinite !important;
}
.contact-shapes .shape-1 {
top: 10% !important;
left: 5% !important;
width: 40px !important;
height: 40px !important;
background: linear-gradient(45deg, #1ec28b, #204d40) !important;
border-radius: 50% !important;
animation-delay: 0s !important;
}
.contact-shapes .shape-2 {
top: 75% !important;
right: 10% !important;
width: 30px !important;
height: 30px !important;
background: linear-gradient(45deg, #204d40, #1ec28b) !important;
border-radius: 8px !important;
animation-delay: 8s !important;
}
.contact-shapes .shape-3 {
top: 45% !important;
left: 85% !important;
width: 35px !important;
height: 35px !important;
background: linear-gradient(45deg, #1ec28b, #204d40) !important;
border-radius: 50% 50% 0 50% !important;
animation-delay: 16s !important;
}
@keyframes contactPatternFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(1deg); }
}
@keyframes contactParticleFloat {
0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.4; }
50% { transform: translateY(-25px) translateX(15px); opacity: 0.7; }
}
@keyframes contactShapeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
50% { transform: translateY(-20px) rotate(5deg); opacity: 0.2; }
}
.contact-header, .form-header {
text-align: center !important;
margin-bottom: 40px !important;
position: relative !important;
z-index: 2 !important;
}
.contact-badge {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 25px !important;
}
.contact-badge .badge-inner {
position: relative !important;
width: 60px !important;
height: 60px !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
color: white !important;
z-index: 2 !important;
box-shadow: 0 8px 25px rgba(30, 194, 139, 0.3) !important;
animation: contactBadgePulse 3s ease-in-out infinite !important;
}
.contact-badge .badge-glow {
position: absolute !important;
top: -10px !important;
left: -10px !important;
right: -10px !important;
bottom: -10px !important;
background: linear-gradient(135deg, rgba(30, 194, 139, 0.2), rgba(45, 212, 163, 0.2)) !important;
border-radius: 50% !important;
animation: contactBadgeGlow 4s ease-in-out infinite !important;
z-index: 1 !important;
}
.contact-header h3 {
font-size: 2rem !important;
font-weight: 700 !important;
color: #2c3e50 !important;
margin-bottom: 12px !important;
background: linear-gradient(135deg, #2c3e50 0%, #1ec28b 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.contact-header p {
font-size: 1.1rem !important;
color: #6c757d !important;
line-height: 1.6 !important;
max-width: 400px !important;
margin: 0 auto !important;
}
@keyframes contactBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes contactBadgeGlow {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.1); }
}
.contact-icon-wrapper {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 20px !important;
}
.contact-icon, .form-icon {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 60px !important;
height: 60px !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
color: white !important;
border-radius: 50% !important;
font-size: 24px !important;
z-index: 2 !important;
box-shadow: 0 8px 25px rgba(30, 194, 139, 0.3) !important;
animation: contactIconPulse 3s ease-in-out infinite !important;
}
.contact-icon-wrapper .icon-ring {
position: absolute !important;
top: -5px !important;
left: -5px !important;
right: -5px !important;
bottom: -5px !important;
border: 2px solid rgba(30, 194, 139, 0.2) !important;
border-radius: 50% !important;
animation: iconRingRotate 4s linear infinite !important;
}
.contact-icon-wrapper .icon-particles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.contact-icon-wrapper .icon-particles span {
position: absolute !important;
width: 4px !important;
height: 4px !important;
background: #1ec28b !important;
border-radius: 50% !important;
animation: iconParticleFloat 3s ease-in-out infinite !important;
}
.contact-icon-wrapper .icon-particles span:nth-child(1) {
top: 20% !important;
left: 20% !important;
animation-delay: 0s !important;
}
.contact-icon-wrapper .icon-particles span:nth-child(2) {
top: 60% !important;
right: 20% !important;
animation-delay: 1s !important;
}
.contact-icon-wrapper .icon-particles span:nth-child(3) {
bottom: 20% !important;
left: 50% !important;
animation-delay: 2s !important;
}
@keyframes iconRingRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes iconParticleFloat {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
50% { transform: translateY(-10px) scale(1.2); opacity: 1; }
}
@keyframes contactIconPulse {
0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(20, 130, 85, 0.3); }
50% { transform: scale(1.1); box-shadow: 0 12px 25px rgba(20, 130, 85, 0.4); }
}
.contact-header h3, .form-header h3 {
font-size: 20px !important;
font-weight: 700 !important;
color: #333 !important;
margin-bottom: 8px !important;
}
.contact-header p, .form-header p {
color: #666 !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.contact-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
margin-bottom: 40px !important;
}
.contact-card {
position: relative !important;
transition: all 0.4s ease !important;
}
.contact-card .card-inner {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border: 1px solid rgba(30, 194, 139, 0.1) !important;
border-radius: 15px !important;
padding: 20px !important;
transition: all 0.4s ease !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}
.contact-card:hover .card-inner {
transform: translateY(-8px) !important;
border-color: #1ec28b !important;
box-shadow: 0 20px 50px rgba(30, 194, 139, 0.15) !important;
}
.contact-card .contact-icon {
position: relative !important;
width: 50px !important;
height: 50px !important;
margin-bottom: 15px !important;
}
.contact-card .icon-ring {
position: absolute !important;
top: -5px !important;
left: -5px !important;
right: -5px !important;
bottom: -5px !important;
border: 2px solid rgba(30, 194, 139, 0.2) !important;
border-radius: 50% !important;
animation: iconRingRotate 4s linear infinite !important;
}
.contact-card .icon-core {
position: relative !important;
width: 50px !important;
height: 50px !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 20px !important;
color: white !important;
z-index: 2 !important;
box-shadow: 0 6px 20px rgba(30, 194, 139, 0.3) !important;
transition: all 0.3s ease !important;
}
.contact-card:hover .icon-core {
transform: scale(1.1) !important;
box-shadow: 0 12px 35px rgba(30, 194, 139, 0.4) !important;
}
.contact-card .icon-particles {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
pointer-events: none !important;
}
.contact-card .icon-particles span {
position: absolute !important;
width: 4px !important;
height: 4px !important;
background: #1ec28b !important;
border-radius: 50% !important;
animation: iconParticleFloat 3s ease-in-out infinite !important;
}
.contact-card .icon-particles span:nth-child(1) {
top: 20% !important;
left: 20% !important;
animation-delay: 0s !important;
}
.contact-card .icon-particles span:nth-child(2) {
top: 60% !important;
right: 20% !important;
animation-delay: 1s !important;
}
.contact-card .icon-particles span:nth-child(3) {
bottom: 20% !important;
left: 50% !important;
animation-delay: 2s !important;
}
.contact-card .contact-content {
position: relative !important;
z-index: 2 !important;
}
.contact-card .contact-content h5 {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #2c3e50 !important;
margin-bottom: 8px !important;
transition: color 0.3s ease !important;
}
.contact-card:hover .contact-content h5 {
color: #1ec28b !important;
}
.contact-card .contact-content p {
font-size: 1rem !important;
color: #6c757d !important;
line-height: 1.5 !important;
margin-bottom: 15px !important;
}
.contact-card .contact-meta {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.contact-card .meta-badge {
display: inline-flex !important;
align-items: center !important;
gap: 1px !important;
background: linear-gradient(135deg, rgba(30, 194, 139, 0.1), rgba(45, 212, 163, 0.1)) !important;
color: #1ec28b !important;
padding: 1px 3px !important;
border-radius: 6px !important;
font-size: 0.6rem !important;
font-weight: 500 !important;
border: 1px solid rgba(30, 194, 139, 0.2) !important;
transition: all 0.3s ease !important;
}
.contact-card .meta-badge i {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
background: #1ec28b !important;
color: white !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.4rem !important;
flex-shrink: 0 !important;
}
/* Responsive Navbar Styles */
@media (max-width: 1200px) {
.modern-navbar .main-menu {
margin-left: 30px !important;
}
.modern-navbar .nav-list {
gap: 20px !important;
}
.modern-navbar .nav-link {
font-size: 14px !important;
padding: 8px 12px !important;
}
.modern-navbar .dropdown-menu {
min-width: 220px !important;
}
}
/* Responsive navbar - show hamburger on smaller screens */
@media (max-width: 1199px) {
.modern-navbar .main-menu,
.header_menu.modern-navbar .main-menu,
.home-two-menubar.modern-navbar .main-menu,
.home-one-menubar-area .main-menu,
.header_menu .main-menu,
.home-two-menubar .main-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.modern-navbar .nav-list,
.header_menu.modern-navbar .nav-list,
.home-two-menubar.modern-navbar .nav-list {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.modern-navbar .modern-menu,
.header_menu.modern-navbar .modern-menu,
.home-two-menubar.modern-navbar .modern-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.modern-navbar .modern-mobile-btn,
.header_menu.modern-navbar .modern-mobile-btn,
.home-two-menubar.modern-navbar .modern-mobile-btn,
.das-menu-toggle.menuShow.d-inline-block.d-lg-none.modern-mobile-btn,
.das-menu-toggle,
.home-two-menubar .das-menu-toggle,
.header_menu .das-menu-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 45px !important;
height: 45px !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-left: auto !important;
position: relative !important;
z-index: 1000 !important;
visibility: visible !important;
opacity: 1 !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
/* Hide any old hamburger menu buttons */
.modern-navbar .side-box-icon,
.modern-navbar .baricon-left,
.modern-navbar .modern-menu-btn {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.modern-navbar .modern-mobile-btn:hover {
transform: scale(1.05) !important;
box-shadow: 0 4px 15px rgba(20, 130, 85, 0.3) !important;
}
.modern-navbar .hamburger-line {
width: 20px !important;
height: 2px !important;
background: white !important;
margin: 3px 0 !important;
transition: all 0.3s ease !important;
border-radius: 1px !important;
}
.modern-navbar .modern-mobile-btn.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px) !important;
}
.modern-navbar .modern-mobile-btn.active .hamburger-line:nth-child(2) {
opacity: 0 !important;
}
.modern-navbar .modern-mobile-btn.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px) !important;
}
/* Mobile Menu Styles */
.das-menu-wrapper {
position: fixed !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100vh !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
z-index: 9999 !important;
transition: left 0.4s ease !important;
overflow-y: auto !important;
display: block !important;
visibility: hidden !important;
}
.das-menu-wrapper.das-body-visible {
left: 0 !important;
visibility: visible !important;
}
.das-menu-area {
padding: 2rem !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.das-menu-toggle {
position: absolute !important;
top: 20px !important;
right: 20px !important;
background: white !important;
border: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
color: #1ec28b !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.das-menu-toggle:hover {
transform: scale(1.1) !important;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3) !important;
}
.mobile-logo {
text-align: center !important;
margin-bottom: 3rem !important;
padding-top: 2rem !important;
}
.mobile-logo img {
max-width: 150px !important;
height: auto !important;
}
.das-mobile-menu {
flex: 1 !important;
}
.das-mobile-menu ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.das-mobile-menu li {
margin-bottom: 1rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.das-mobile-menu li:last-child {
border-bottom: none !important;
}
.das-mobile-menu a {
display: block !important;
padding: 15px 0 !important;
color: white !important;
text-decoration: none !important;
font-size: 16px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
position: relative !important;
}
.das-mobile-menu a:hover {
color: #f8f9fa !important;
padding-left: 10px !important;
}
.das-mobile-menu .das-item-has-children > a {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.das-mobile-menu .das-item-has-children > a i {
transition: transform 0.3s ease !important;
}
.das-mobile-menu .das-item-has-children.active > a i {
transform: rotate(180deg) !important;
}
.das-submenu {
display: none !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 8px !important;
margin-top: 0.5rem !important;
padding: 10px 0 !important;
border-left: 3px solid #148255 !important;
}
.das-item-has-children.active .das-submenu {
display: block !important;
}
.das-submenu li {
border-bottom: none !important;
margin-bottom: 0 !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.das-submenu a {
padding: 12px 20px !important;
font-size: 14px !important;
color: rgba(255, 255, 255, 0.9) !important;
display: block !important;
border-bottom: none !important;
transition: all 0.3s ease !important;
}
.das-submenu a:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: white !important;
padding-left: 25px !important;
}
}
@media (max-width: 768px) {
.modern-navbar .brands_logo .barnds {
padding-left: 15px !important;
margin-right: 10px !important;
}
.modern-navbar .brands_logo .side-box-icon {
width: 50px !important;
margin-right: 10px !important;
}
.modern-navbar .logo-img {
max-width: 100px !important;
height: auto !important;
}
.modern-navbar .header-two-main-wrapper {
padding: 10px 0 !important;
}
.modern-navbar .menu_center {
justify-content: flex-end !important;
padding-right: 15px !important;
}
.das-menu-area {
padding: 1.5rem !important;
}
.mobile-logo {
margin-bottom: 2rem !important;
}
.mobile-logo img {
max-width: 120px !important;
}
.das-mobile-menu a {
font-size: 15px !important;
padding: 12px 0 !important;
}
.das-submenu a {
padding: 10px 15px !important;
font-size: 13px !important;
}
}
@media (max-width: 576px) {
.modern-navbar .brands_logo .barnds {
padding-left: 10px !important;
margin-right: 5px !important;
}
.modern-navbar .brands_logo .side-box-icon {
width: 40px !important;
margin-right: 5px !important;
}
.modern-navbar .logo-img {
max-width: 80px !important;
height: auto !important;
}
.modern-navbar .header-two-main-wrapper {
padding: 8px 0 !important;
}
.modern-navbar .menu_center {
justify-content: flex-end !important;
padding-right: 10px !important;
}
.modern-navbar .modern-mobile-btn {
width: 35px !important;
height: 35px !important;
margin-top: -30px !important;
}
.modern-navbar .hamburger-line {
width: 18px !important;
height: 2px !important;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.modern-navbar .brands_logo .barnds {
padding-left: 8px !important;
margin-right: 3px !important;
}
.modern-navbar .brands_logo .side-box-icon {
width: 35px !important;
margin-right: 3px !important;
}
.modern-navbar .logo-img {
max-width: 70px !important;
height: auto !important;
}
.modern-navbar .header-two-main-wrapper {
padding: 5px 0 !important;
min-height: 60px !important;
}
.modern-navbar .menu_center {
padding-right: 8px !important;
}
.modern-navbar .modern-mobile-btn {
width: 32px !important;
height: 32px !important;
}
.modern-navbar .hamburger-line {
width: 16px !important;
height: 2px !important;
}
}
/* Ultra small screens */
@media (max-width: 360px) {
.modern-navbar .brands_logo .barnds {
padding-left: 5px !important;
margin-right: 2px !important;
}
.modern-navbar .brands_logo .side-box-icon {
width: 30px !important;
margin-right: 2px !important;
}
.modern-navbar .logo-img {
max-width: 60px !important;
height: auto !important;
}
.modern-navbar .header-two-main-wrapper {
padding: 3px 0 !important;
min-height: 55px !important;
}
.modern-navbar .menu_center {
padding-right: 5px !important;
}
.modern-navbar .modern-mobile-btn {
width: 30px !important;
height: 30px !important;
}
.modern-navbar .hamburger-line {
width: 14px !important;
height: 2px !important;
}
.das-menu-area {
padding: 1rem !important;
}
.mobile-logo {
margin-bottom: 1.5rem !important;
}
.mobile-logo img {
max-width: 100px !important;
}
.das-mobile-menu a {
font-size: 14px !important;
padding: 10px 0 !important;
}
.das-submenu a {
padding: 8px 12px !important;
font-size: 12px !important;
}
}
/* Force mobile menu button to show on smaller screens */
@media (max-width: 1199px) {
.modern-navbar .modern-mobile-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
background: #148255 !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-left: auto !important;
margin-top: 0 !important;
position: relative !important;
z-index: 1000 !important;
}
.modern-navbar .header-two-main-wrapper {
align-items: center !important;
min-height: 70px !important;
}
.modern-navbar .logo_center {
flex: 1 !important;
display: flex !important;
align-items: center !important;
}
.modern-navbar .menu_center {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
}
.modern-navbar .main-menu {
display: none !important;
}
.modern-navbar .nav-list {
display: none !important;
}
.modern-navbar .menu_center {
justify-content: flex-end !important;
}
.modern-navbar .menu_center .main-menu {
display: none !important;
}
.modern-navbar .hamburger-line,
.hamburger-line {
width: 20px !important;
height: 2px !important;
background: white !important;
margin: 3px 0 !important;
transition: all 0.3s ease !important;
border-radius: 1px !important;
display: block !important;
}
/* Override Bootstrap classes that hide the hamburger */
.d-lg-none {
display: flex !important;
}
.menuShow {
display: flex !important;
}
/* Force hamburger button to be visible - ULTIMATE OVERRIDE */
button.das-menu-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 9999 !important;
}
/* Force hamburger lines to be visible */
button.das-menu-toggle .hamburger-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
background: white !important;
width: 20px !important;
height: 2px !important;
margin: 3px 0 !important;
}
}
/* ULTIMATE HAMBURGER FIX - ALWAYS SHOW */
button.das-menu-toggle,
.das-menu-toggle,
.menuShow,
.d-inline-block,
.d-lg-none,
.modern-mobile-btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 9999 !important;
align-items: center !important;
justify-content: center !important;
width: 50px !important;
height: 50px !important;
background: #148255 !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-left: auto !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
button.das-menu-toggle .hamburger-line,
.das-menu-toggle .hamburger-line,
.hamburger-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
background: white !important;
width: 25px !important;
height: 3px !important;
margin: 4px 0 !important;
border-radius: 2px !important;
transition: all 0.3s ease !important;
}
/* GLOBAL HAMBURGER VISIBILITY - ALWAYS SHOW */
button.das-menu-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 9999 !important;
align-items: center !important;
justify-content: center !important;
width: 45px !important;
height: 45px !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-left: auto !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
button.das-menu-toggle .hamburger-line {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
background: white !important;
width: 20px !important;
height: 2px !important;
margin: 3px 0 !important;
border-radius: 1px !important;
transition: all 0.3s ease !important;
}
/* New Footer Design - Black Background with White Text */
.new-footer-section {
background: #000000;
color: #ffffff;
padding: 60px 0 20px 0;
}
.new-footer-section .footer-widget {
margin-bottom: 30px;
}
.new-footer-section .footer-title .title {
color: #ffffff;
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
position: relative;
}
.new-footer-section .footer-title .title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: #1ec28b;
}
.new-footer-section .footer-logo img {
max-width: 150px;
margin-bottom: 15px;
}
.new-footer-section .text {
color: #cccccc;
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.new-footer-section .footer-social-link ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px;
}
.new-footer-section .footer-social-link ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
background: #1ec28b;
color: #ffffff;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
}
.new-footer-section .footer-social-link ul li a:hover {
background: #ffffff;
color: #1ec28b;
transform: translateY(-3px);
}
.new-footer-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.new-footer-section ul li {
margin-bottom: 10px;
}
.new-footer-section ul li a {
color: #cccccc;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.new-footer-section ul li a:hover {
color: #1ec28b;
transform: translateX(5px);
}
.new-footer-section ul li a i {
margin-right: 8px;
color: #1ec28b;
font-size: 12px;
}
/* Force horizontal layout for contact info */
.new-footer-section .contact-info {
margin-top: 10px;
width: 100%;
}
.new-footer-section .contact-grid {
display: flex !important;
gap: 40px;
flex-wrap: nowrap !important;
flex-direction: row !important;
width: 100%;
}
.new-footer-section .office-location,
.new-footer-section .contact-details {
flex: 1 !important;
min-width: 250px;
display: inline-block;
vertical-align: top;
}
/* Enhanced Footer Contact Information Styles - Horizontal Layout */
.new-footer-section .contact-grid {
display: flex;
gap: 40px;
flex-wrap: nowrap;
flex-direction: row;
}
.new-footer-section .office-location,
.new-footer-section .contact-details {
flex: 1;
min-width: 250px;
display: inline-block;
}
.new-footer-section .contact-info h5 {
color: #ffffff;
font-size: 16px;
font-weight: 600;
margin: 15px 0 8px 0;
display: flex;
align-items: center;
gap: 8px;
}
.new-footer-section .contact-info h5:first-child {
margin-top: 0;
}
.new-footer-section .contact-info h5 i {
color: #ffffff;
font-size: 14px;
width: 16px;
}
.new-footer-section .contact-info p {
color: #cccccc;
font-size: 14px;
line-height: 1.5;
margin: 6px 0 10px 24px;
}
.new-footer-section .contact-info p a {
color: #cccccc;
text-decoration: none;
transition: all 0.3s ease;
}
.new-footer-section .contact-info p a:hover {
color: #ffffff;
text-decoration: underline;
}
.new-footer-section .copyuright-area {
border-top: 1px solid #333333;
padding-top: 20px;
margin-top: 30px;
}
.new-footer-section .footer-copyright p {
color: #cccccc;
font-size: 14px;
}
.new-footer-section .footer-copyright a {
color: #1ec28b;
text-decoration: none;
}
.new-footer-section .footer-copyright a:hover {
color: #ffffff;
}
/* Amazing Footer Design - Black Background with White Text */
.amazing-footer-section {
background: #000000 !important;
color: #ffffff !important;
padding: 80px 0 30px 0 !important;
position: relative;
overflow: hidden;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* Override any old footer styles */
.footer_section,
.footer-bg-img,
.footer_section *,
.footer-bg-img * {
background: transparent !important;
color: inherit !important;
}
/* Ensure our footer takes precedence */
.amazing-footer-section * {
color: inherit !important;
}
/* Override responsive.css footer styles */
.amazing-footer-section .footer-widget-area {
padding: 80px 0 30px 0 !important;
background: #000000 !important;
color: #ffffff !important;
}
.amazing-footer-section .footer-widget-area * {
color: #ffffff !important;
}
/* Override any other footer widget styles */
.amazing-footer-section .footer-widget {
background: transparent !important;
color: #ffffff !important;
}
.amazing-footer-section .footer-widget * {
color: #ffffff !important;
}
.amazing-footer-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(30, 194, 139, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.amazing-footer-section .footer-widget {
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.amazing-footer-section .footer-title .title {
color: #ffffff;
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.amazing-footer-section .footer-title .title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(90deg, #1ec28b, #148255);
border-radius: 2px;
}
.amazing-footer-section .footer-logo img {
max-width: 180px;
margin-bottom: 20px;
filter: brightness(0) invert(1);
}
.amazing-footer-section .description {
color: #ffffff !important;
font-size: 15px;
line-height: 1.8;
margin-bottom: 25px;
font-weight: 400;
}
.amazing-footer-section .footer-social-link ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px;
}
.amazing-footer-section .footer-social-link ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(135deg, #1ec28b, #148255);
color: #ffffff;
border-radius: 50%;
text-decoration: none;
transition: all 0.4s ease;
box-shadow: 0 4px 15px rgba(30, 194, 139, 0.3);
position: relative;
overflow: hidden;
}
.amazing-footer-section .footer-social-link 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;
}
.amazing-footer-section .footer-social-link ul li a:hover::before {
left: 100%;
}
.amazing-footer-section .footer-social-link ul li a:hover {
background: linear-gradient(135deg, #ffffff, #f0f0f0);
color: #1ec28b;
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(30, 194, 139, 0.4);
}
.amazing-footer-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.amazing-footer-section ul li {
margin-bottom: 12px;
}
.amazing-footer-section ul li a {
color: #cccccc;
text-decoration: none;
font-size: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
padding: 8px 0;
position: relative;
}
.amazing-footer-section ul li a::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #1ec28b, #148255);
transition: width 0.3s ease;
}
.amazing-footer-section ul li a:hover::before {
width: 100%;
}
.amazing-footer-section ul li a:hover {
color: #ffffff;
transform: translateX(8px);
}
.amazing-footer-section ul li a i {
margin-right: 10px;
color: #1ec28b;
font-size: 12px;
transition: all 0.3s ease;
}
.amazing-footer-section ul li a:hover i {
transform: scale(1.2);
}
/* Enhanced Contact Information Styles */
.amazing-footer-section .contact-info {
margin-top: 20px;
}
.amazing-footer-section .contact-grid {
display: flex;
gap: 40px;
flex-wrap: nowrap;
}
.amazing-footer-section .office-locations,
.amazing-footer-section .contact-details {
flex: 1;
min-width: 280px;
}
.amazing-footer-section .contact-info h5 {
color: #ffffff;
font-size: 16px;
font-weight: 600;
margin: 20px 0 10px 0;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.amazing-footer-section .contact-info h5:first-child {
margin-top: 0;
}
.amazing-footer-section .contact-info h5 i {
color: #1ec28b;
font-size: 16px;
width: 20px;
text-align: center;
}
.amazing-footer-section .contact-info p {
color: #ffffff;
font-size: 14px;
line-height: 1.6;
margin: 8px 0 12px 0;
position: relative;
}
.amazing-footer-section .contact-info p a {
color: #ffffff;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.amazing-footer-section .contact-info p a:hover {
color: #1ec28b;
text-decoration: none;
}
.amazing-footer-section .contact-info p a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: #1ec28b;
transition: width 0.3s ease;
}
.amazing-footer-section .contact-info p a:hover::after {
width: 100%;
}
.amazing-footer-section .copyuright-area {
border-top: 1px solid #333333;
padding-top: 25px;
margin-top: 40px;
position: relative;
}
.amazing-footer-section .copyuright-area::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, #1ec28b, transparent);
}
.amazing-footer-section .footer-copyright p {
color: #999999;
font-size: 14px;
margin: 0;
}
.amazing-footer-section .footer-copyright a {
color: #1ec28b;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.amazing-footer-section .footer-copyright a:hover {
color: #ffffff;
text-shadow: 0 0 10px rgba(30, 194, 139, 0.5);
}
/* Responsive Design for Amazing Footer */
@media (max-width: 768px) {
.amazing-footer-section {
padding: 60px 0 25px 0;
}
.amazing-footer-section .contact-grid {
flex-direction: column;
gap: 30px;
}
.amazing-footer-section .office-locations,
.amazing-footer-section .contact-details {
min-width: auto;
}
.amazing-footer-section .footer-title .title {
font-size: 20px;
}
.amazing-footer-section .description {
font-size: 14px;
}
.amazing-footer-section .contact-info h5 {
font-size: 15px;
margin: 15px 0 8px 0;
}
.amazing-footer-section .contact-info p {
font-size: 13px;
margin: 6px 0 10px 0;
}
}
/* Responsive adjustments for new footer */
@media (max-width: 768px) {
.new-footer-section {
padding: 40px 0 15px 0;
}
.new-footer-section .contact-grid {
flex-direction: row;
gap: 20px;
}
.new-footer-section .office-location,
.new-footer-section .contact-details {
min-width: auto;
flex: 1;
}
.new-footer-section .contact-info h5 {
font-size: 14px;
margin: 12px 0 6px 0;
}
.new-footer-section .contact-info p {
font-size: 12px;
margin: 4px 0 8px 20px;
}
.new-footer-section .footer-title .title {
font-size: 18px;
}
.new-footer-section .text {
font-size: 13px;
}
}
/* Ensure mobile menu is properly positioned */
.das-menu-wrapper {
position: fixed !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100vh !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
z-index: 9999 !important;
transition: left 0.4s ease !important;
overflow-y: auto !important;
display: block !important;
visibility: hidden !important;
}
.das-menu-wrapper.das-body-visible {
left: 0 !important;
visibility: visible !important;
}
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
z-index: 99999 !important;
transition: left 0.4s ease !important;
overflow-y: auto !important;
}
.das-menu-wrapper.das-body-visible {
left: 0 !important;
}
/* Override any conflicting styles */
.das-menu-toggle.menuShow {
display: flex !important;
}
.das-menu-toggle.d-inline-block {
display: flex !important;
}
.das-menu-toggle.d-lg-none {
display: flex !important;
}
/* Hide desktop menu on mobile */
@media (max-width: 991px) {
.modern-menu {
display: none !important;
}
.nav-list {
display: none !important;
}
/* Ensure mobile menu button is visible */
.das-menu-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Override Bootstrap display classes */
.d-lg-none {
display: flex !important;
}
.d-inline-block {
display: flex !important;
}
}
/* Additional mobile menu styles */
@media (max-width: 991px) {
.header_menu .menu_center {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
.header_menu .main-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.header_menu .modern-mobile-btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1000 !important;
}
}
/* CRITICAL: Force mobile menu to work */
@media (max-width: 991px) {
/* Hide desktop menu completely */
.modern-menu {
display: none !important;
}
.nav-list {
display: none !important;
}
.main-menu {
display: none !important;
}
/* Show mobile menu button */
.das-menu-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1000 !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border: none !important;
border-radius: 8px !important;
width: 40px !important;
height: 40px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.das-menu-toggle .hamburger-line {
width: 20px !important;
height: 2px !important;
background: white !important;
margin: 3px 0 !important;
transition: all 0.3s ease !important;
border-radius: 1px !important;
display: block !important;
}
/* Override all Bootstrap classes */
.d-lg-none {
display: flex !important;
}
.d-inline-block {
display: flex !important;
}
.menuShow {
display: flex !important;
}
/* Ensure menu center shows the button */
.menu_center {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
}
/* Mobile menu overlay */
.das-menu-wrapper {
position: fixed !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100vh !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
z-index: 99999 !important;
transition: left 0.4s ease !important;
overflow-y: auto !important;
}
.das-menu-wrapper.das-body-visible {
left: 0 !important;
}
/* ULTIMATE FIX: Force everything to work */
@media (max-width: 991px) {
/* Hide ALL desktop menu elements */
.modern-menu,
.nav-list,
.main-menu,
.nav-item,
.nav-link,
.dropdown-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Show mobile menu button with maximum specificity */
.header_menu .menu_center .das-menu-toggle,
.modern-navbar .menu_center .das-menu-toggle,
.das-menu-toggle,
.das-menu-toggle.menuShow,
.das-menu-toggle.d-inline-block,
.das-menu-toggle.d-lg-none {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1000 !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border: none !important;
border-radius: 8px !important;
width: 40px !important;
height: 40px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-left: auto !important;
}
/* Style hamburger lines */
.das-menu-toggle .hamburger-line {
width: 20px !important;
height: 2px !important;
background: white !important;
margin: 3px 0 !important;
transition: all 0.3s ease !important;
border-radius: 1px !important;
display: block !important;
}
/* Ensure menu center is properly aligned */
.menu_center {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
width: auto !important;
}
/* Override any conflicting Bootstrap classes */
.d-lg-none {
display: flex !important;
}
.d-inline-block {
display: flex !important;
}
.menuShow {
display: flex !important;
}
}
/* Additional specificity for mobile menu */
@media (max-width: 991px) {
.header_menu .modern-menu {
display: none !important;
}
.header_menu .nav-list {
display: none !important;
}
.header_menu .main-menu {
display: none !important;
}
}
/* OVERRIDE RESPONSIVE.CSS CONFLICTING STYLES */
@media (max-width: 992px) {
/* Override the conflicting das-menu-toggle styles from responsive.css */
.das-menu-toggle {
display: flex !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
font-size: 18px !important;
border: none !important;
background: #148255 !important;
color: white !important;
margin-right: 0 !important;
margin-top: -35px !important;
border-radius: 8px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
position: relative !important;
z-index: 1000 !important;
}
/* Override hamburger line styles */
.das-menu-toggle .hamburger-line {
width: 20px !important;
height: 2px !important;
background: white !important;
margin: 3px 0 !important;
transition: all 0.3s ease !important;
border-radius: 1px !important;
display: block !important;
}
/* Override home-two-menubar specific styles */
.home-two-menubar .das-menu-toggle {
background: #148255 !important;
color: white !important;
width: 40px !important;
height: 40px !important;
margin-top: -35px !important;
border-radius: 8px !important;
}
/* Ensure menu center shows the button */
.menu_center {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
/* Hide desktop menu completely */
.modern-menu,
.nav-list,
.main-menu,
.nav-item,
.nav-link,
.dropdown-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
.contact-card:hover .meta-badge {
background: linear-gradient(135deg, rgba(30, 194, 139, 0.15), rgba(45, 212, 163, 0.15)) !important;
transform: translateY(-2px) !important;
}
.contact-card .card-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: radial-gradient(circle at 50% 50%, rgba(30, 194, 139, 0.1) 0%, transparent 70%) !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
pointer-events: none !important;
border-radius: 20px !important;
}
.contact-card:hover .card-glow {
opacity: 1 !important;
}
.contact-info {
margin-bottom: 20px !important;
}
.contact-item {
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
margin-bottom: 20px !important;
padding: 20px !important;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border: 1px solid rgba(30, 194, 139, 0.1) !important;
border-radius: 15px !important;
transition: all 0.4s ease !important;
position: relative !important;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
overflow: hidden !important;
}
.contact-item::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, #1ec28b, #204d40) !important;
transform: scaleX(0) !important;
transition: transform 0.3s ease !important;
}
.contact-item:hover {
background: linear-gradient(135deg, #ffffff 0%, rgba(30, 194, 139, 0.02) 100%) !important;
border-color: #1ec28b !important;
transform: translateY(-5px) !important;
box-shadow: 0 15px 40px rgba(30, 194, 139, 0.15) !important;
}
.contact-item:hover::before {
transform: scaleX(1) !important;
}
.contact-item .contact-icon-wrapper {
position: relative !important;
width: 50px !important;
height: 50px !important;
flex-shrink: 0 !important;
}
.contact-item .contact-icon {
position: relative !important;
width: 50px !important;
height: 50px !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
color: white !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
z-index: 2 !important;
box-shadow: 0 5px 15px rgba(30, 194, 139, 0.3) !important;
transition: all 0.3s ease !important;
}
.contact-item:hover .contact-icon {
transform: scale(1.1) !important;
box-shadow: 0 8px 25px rgba(30, 194, 139, 0.4) !important;
}
.contact-item .icon-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
border-radius: 12px !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
filter: blur(8px) !important;
}
.contact-item:hover .icon-glow {
opacity: 0.3 !important;
}
.contact-details h6 {
font-size: 14px !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 3px !important;
}
.contact-details p {
color: #666 !important;
font-size: 12px !important;
line-height: 1.4 !important;
margin-bottom: 4px !important;
}
.contact-details .contact-badge {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
background: linear-gradient(135deg, rgba(30, 194, 139, 0.1), rgba(45, 212, 163, 0.1)) !important;
color: #1ec28b !important;
padding: 6px 12px !important;
border-radius: 20px !important;
font-size: 11px !important;
font-weight: 600 !important;
margin-top: 8px !important;
border: 1px solid rgba(30, 194, 139, 0.2) !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
}
.contact-details .contact-badge::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
transition: left 0.5s ease !important;
}
.contact-details .contact-badge:hover {
background: linear-gradient(135deg, rgba(30, 194, 139, 0.15), rgba(45, 212, 163, 0.15)) !important;
transform: translateY(-2px) !important;
box-shadow: 0 5px 15px rgba(30, 194, 139, 0.2) !important;
}
.contact-details .contact-badge:hover::before {
left: 100% !important;
}
.contact-details .contact-badge i {
font-size: 10px !important;
animation: badgeIconPulse 2s ease-in-out infinite !important;
}
@keyframes badgeIconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.contact-features {
margin-top: 40px !important;
padding-top: 30px !important;
border-top: 1px solid rgba(30, 194, 139, 0.1) !important;
position: relative !important;
z-index: 2 !important;
}
.features-header {
text-align: center !important;
margin-bottom: 30px !important;
}
.features-header h4 {
font-size: 1.5rem !important;
font-weight: 700 !important;
color: #2c3e50 !important;
margin-bottom: 8px !important;
background: linear-gradient(135deg, #2c3e50 0%, #1ec28b 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.features-header p {
font-size: 1rem !important;
color: #6c757d !important;
font-style: italic !important;
}
.features-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
.feature-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 15px !important;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border: 1px solid rgba(30, 194, 139, 0.08) !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
}
.feature-item::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: linear-gradient(90deg, #1ec28b, #204d40) !important;
transform: scaleX(0) !important;
transition: transform 0.3s ease !important;
}
.feature-item:hover {
transform: translateY(-5px) !important;
border-color: #1ec28b !important;
box-shadow: 0 15px 40px rgba(30, 194, 139, 0.1) !important;
}
.feature-item:hover::before {
transform: scaleX(1) !important;
}
.feature-item .feature-icon {
position: relative !important;
width: 40px !important;
height: 40px !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
color: white !important;
flex-shrink: 0 !important;
transition: all 0.3s ease !important;
z-index: 2 !important;
}
.feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg) !important;
box-shadow: 0 8px 25px rgba(30, 194, 139, 0.3) !important;
}
.feature-item .icon-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, #1ec28b, #204d40) !important;
border-radius: 12px !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
filter: blur(8px) !important;
z-index: 1 !important;
}
.feature-item:hover .icon-glow {
opacity: 0.3 !important;
}
.feature-item .feature-content {
flex: 1 !important;
}
.feature-item .feature-content h6 {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #2c3e50 !important;
margin-bottom: 5px !important;
transition: color 0.3s ease !important;
}
.feature-item:hover .feature-content h6 {
color: #1ec28b !important;
}
.feature-item .feature-content p {
font-size: 0.9rem !important;
color: #6c757d !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.feature-item {
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding: 15px !important;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border: 1px solid rgba(30, 194, 139, 0.08) !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
}
.feature-item::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 4px !important;
height: 100% !important;
background: linear-gradient(180deg, #1ec28b, #204d40) !important;
transform: scaleY(0) !important;
transition: transform 0.3s ease !important;
}
.feature-item:hover {
background: linear-gradient(135deg, #ffffff 0%, rgba(30, 194, 139, 0.03) 100%) !important;
border-color: #1ec28b !important;
transform: translateX(5px) !important;
box-shadow: 0 8px 25px rgba(30, 194, 139, 0.1) !important;
}
.feature-item:hover::before {
transform: scaleY(1) !important;
}
gap: 8px !important;
padding: 8px !important;
background: white !important;
border: 1px solid #e9ecef !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
}
.feature-item:hover {
background: rgba(20, 130, 85, 0.02) !important;
border-color: var(--primary-color) !important;
transform: translateX(3px) !important;
}
.feature-item .feature-icon {
width: 24px !important;
height: 24px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
border-radius: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
flex-shrink: 0 !important;
}
.feature-item .feature-content h5 {
font-size: 12px !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 1px !important;
}
.feature-item .feature-content p {
font-size: 10px !important;
color: #666 !important;
margin: 0 !important;
}
.enhanced-contact-form {
margin-top: 20px !important;
}
.input-wrapper {
position: relative !important;
margin-bottom: 15px !important;
}
.input-wrapper .form-control {
width: 100% !important;
padding: 12px 15px 12px 40px !important;
border: 2px solid #e9ecef !important;
border-radius: 10px !important;
font-size: 13px !important;
background: white !important;
transition: all 0.3s ease !important;
position: relative !important;
z-index: 2 !important;
}
.input-wrapper .form-control:focus {
outline: none !important;
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(20, 130, 85, 0.1) !important;
}
.input-wrapper .input-icon {
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #666 !important;
font-size: 14px !important;
z-index: 3 !important;
transition: all 0.3s ease !important;
}
.input-wrapper .form-control:focus + .input-icon {
color: var(--primary-color) !important;
}
.input-wrapper .input-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.1), rgba(143, 145, 147, 0.1)) !important;
border-radius: 12px !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
z-index: 1 !important;
}
.input-wrapper .form-control:focus ~ .input-glow {
opacity: 1 !important;
}
.form-actions {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: 20px !important;
flex-wrap: wrap !important;
gap: 15px !important;
}
.contact-submit-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(135deg, var(--primary-color), var(--secendary-color)) !important;
color: white !important;
border: none !important;
padding: 12px 25px !important;
border-radius: 20px !important;
font-weight: 600 !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 6px 20px rgba(20, 130, 85, 0.25) !important;
}
.contact-submit-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 35px rgba(20, 130, 85, 0.4) !important;
}
.contact-submit-btn::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
transition: left 0.5s ease !important;
}
.contact-submit-btn:hover::before {
left: 100% !important;
}
.contact-submit-btn .btn-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.3), rgba(143, 145, 147, 0.3)) !important;
border-radius: 25px !important;
opacity: 0 !important;
transition: opacity 0.3s ease !important;
filter: blur(10px) !important;
}
.contact-submit-btn:hover .btn-glow {
opacity: 1 !important;
}
.form-features {
display: flex !important;
gap: 15px !important;
flex-wrap: wrap !important;
}
.form-features .feature {
display: flex !important;
align-items: center !important;
gap: 6px !important;
color: var(--primary-color) !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.form-features .feature i {
font-size: 14px !important;
}
.card-glow {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, rgba(20, 130, 85, 0.05), rgba(143, 145, 147, 0.05)) !important;
border-radius: 25px !important;
opacity: 0 !important;
transition: opacity 0.4s ease !important;
pointer-events: none !important;
}
.contact-info-card:hover .card-glow, .contact-form-card:hover .card-glow {
opacity: 1 !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.contact-section {
padding: 60px 0 !important;
}
.contact-info-card .card-inner, .contact-form-card .card-inner {
padding: 30px !important;
border-radius: 20px !important;
}
.contact-header h3, .form-header h3 {
font-size: 20px !important;
}
.contact-item {
padding: 15px !important;
}
.form-actions {
flex-direction: column !important;
align-items: stretch !important;
}
.contact-submit-btn {
width: 100% !important;
justify-content: center !important;
}
}
@media (max-width: 576px) {
.contact-info-card .card-inner, .contact-form-card .card-inner {
padding: 25px !important;
border-radius: 15px !important;
}
.contact-header h3, .form-header h3 {
font-size: 18px !important;
}
.contact-icon, .form-icon {
width: 50px !important;
height: 50px !important;
font-size: 20px !important;
}
.contact-item {
padding: 12px !important;
}
.contact-item .contact-icon {
width: 40px !important;
height: 40px !important;
font-size: 16px !important;
}
.feature-item {
padding: 12px !important;
}
.feature-item .feature-icon {
width: 35px !important;
height: 35px !important;
font-size: 14px !important;
}
}
/* ============== Expertise Template Styles =============== */
.expertise-hero-area {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.expertise-hero-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.expertise-hero-content {
position: relative;
z-index: 2;
}
.expertise-hero-content .sub-title {
color: #2c3e50;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
}
.expertise-hero-content .sub-title .dash {
width: 30px;
height: 2px;
background: linear-gradient(90deg, #2c3e50, #34495e);
}
.expertise-hero-content .title {
font-size: 3.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 25px;
line-height: 1.2;
}
.expertise-hero-content .description {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 40px;
line-height: 1.6;
}
.expertise-stats {
display: flex;
gap: 40px;
margin-top: 30px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
color: #6c757d;
font-weight: 500;
}
.expertise-hero-image {
position: relative;
z-index: 2;
}
.expertise-hero-image img {
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.floating-badge {
position: absolute;
top: -20px;
right: -20px;
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
padding: 15px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 8px;
}
.floating-badge i {
font-size: 1.1rem;
}
/* Expertise Template Specific Styles */
.expertise_details {
background: #f8f9fa;
}
.expertise_details .post-title {
color: #2c3e50;
font-weight: 600;
margin-bottom: 20px;
}
.expertise_details .post-excerpt {
color: #6c757d;
line-height: 1.6;
margin-bottom: 15px;
}
.expertise_details .sub-title {
color: #2c3e50;
font-weight: 600;
margin-bottom: 10px;
}
.expertise_details .sub-title span {
width: 20px;
height: 2px;
background: linear-gradient(90deg, #2c3e50, #34495e);
display: inline-block;
margin-right: 10px;
}
/* CTA Section for Expertise Template */
.cta-area {
position: relative;
overflow: hidden;
}
.cta-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-content .title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.cta-content .description {
font-size: 1.1rem;
margin-bottom: 40px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.cta-primary-btn,
.cta-secondary-btn {
padding: 15px 35px;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}
.cta-primary-btn {
background: white;
color: #2c3e50;
}
.cta-primary-btn:hover {
background: #f8f9fa;
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
color: #2c3e50;
text-decoration: none;
}
.cta-secondary-btn {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-secondary-btn:hover {
background: white;
color: #2c3e50;
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
text-decoration: none;
}
/* Responsive Design for Expertise Template */
@media (max-width: 991px) {
.expertise-hero-content .title {
font-size: 2.5rem;
}
.expertise-stats {
gap: 20px;
}
.stat-number {
font-size: 2rem;
}
.cta-content .title {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 767px) {
.expertise-hero-content .title {
font-size: 2rem;
}
.expertise-stats {
flex-direction: column;
gap: 15px;
}
.cta-content .title {
font-size: 1.8rem;
}
}