/* Topbar Styles */
:root {
--gradient: linear-gradient(135deg, #141716, #040505);
--primary-dark: #00664F;
--primary-light: #00D289;
--text-dark: #333;
--text-light: #666;
}
/* * {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
} */
/* Topbar Styles */
.topbar {
background: #000000;
color: #ffffff;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
position: relative;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0, 210, 137, 0.15);
border-bottom: 1px solid rgba(0, 210, 137, 0.2);
}
.topbar .topbar__container {
max-width: 1200px;
margin: 0 auto;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.topbar .topbar__left {
display: flex;
align-items: center;
gap: 32px;
}
.topbar .topbar__right {
display: flex;
align-items: center;
gap: 24px;
}
.topbar .topbar__item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
text-decoration: none;
padding: 6px 8px;
border-radius: 8px;
}
.topbar .topbar__item--clickable {
cursor: pointer;
}
.topbar .topbar__item--clickable:hover {
background: rgba(0, 102, 79, 0.1);
border: 1px solid rgba(0, 210, 137, 0.2);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 210, 137, 0.15);
}
.topbar .topbar__item:hover {
color: #ffffff;
transform: translateY(-1px);
}
.topbar .topbar__item:hover span {
color: #00D289;
}
.topbar .topbar__item i {
font-size: 14px;
width: 20px;
text-align: center;
color: #00D289;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.topbar .topbar__item span {
font-weight: 500;
white-space: nowrap;
}
.topbar .topbar__hours {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
padding: 8px 16px;
background: rgba(0, 102, 79, 0.1);
border: 1px solid rgba(0, 210, 137, 0.2);
border-radius: 25px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.topbar .topbar__hours:hover {
background: rgba(0, 102, 79, 0.2);
border-color: rgba(0, 210, 137, 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 210, 137, 0.2);
}
.topbar .topbar__hours:hover span {
color: #00D289;
}
.topbar .topbar__hours i {
font-size: 14px;
color: #00D289;
margin-right: 2px;
font-weight: 600;
}
.topbar .topbar__social {
display: flex;
align-items: center;
gap: 8px;
}
.topbar .topbar__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(0, 102, 79, 0.1);
border: 1px solid rgba(0, 210, 137, 0.2);
border-radius: 50%;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.topbar .topbar__social-link:hover {
background: linear-gradient(135deg, #00664F 0%, #00D289 100%);
border-color: rgba(0, 210, 137, 0.5);
color: #ffffff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 210, 137, 0.3);
}
.topbar .topbar__social-link i {
font-size: 14px;
color: #00D289;
transition: all 0.3s ease;
font-weight: 600;
}
.topbar .topbar__social-link:hover i {
color: #ffffff;
}
/* Responsive Design */
@media (max-width: 1100px) {
.topbar .topbar__left {
gap: 24px;
}
.topbar .topbar__hours{
display: none;
}
.topbar .topbar__right {
gap: 20px;
}
.topbar .topbar__item span {
font-size: 13px;
}
}
@media (max-width: 775px) {
.topbar .topbar__container {
padding: 10px 16px;
justify-content: center;
}
.topbar .topbar__right{
display: none;
}
}
@media (max-width: 560px) {
.topbar .topbar__container {
padding: 8px 12px;
}
.topbar .topbar__item span {
font-size: 12px;
}
.topbar .topbar__hours i {
font-size: 14px;
}
.topbar .topbar__social-link {
width: 32px;
height: 32px;
}
.topbar .topbar__social-link i {
font-size: 14px;
}
.topbar .topbar__item.address{
display: none !important;
}
}
@media (max-width: 480px) {
.topbar .topbar__item {
flex-direction: row ;
align-items: flex-start;
gap: 4px;
padding: 6px 0;
}
.topbar .topbar__item i {
margin-bottom: 2px;
}
.topbar .topbar__hours {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 8px 12px;
}
}
@media (max-width: 320px){
.topbar .topbar__item.email{
display: none !important;
}
}
/* Animation for smooth appearance */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.topbar {
animation: slideDown 0.5s ease forwards;
}
/* Focus states for accessibility */
.topbar__social-link:focus {
outline: 2px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
/* Enhanced hover effects for icons */
.topbar__item:hover i {
transform: scale(1.1);
color: #ffffff;
text-shadow: 0 0 8px rgba(0, 210, 137, 0.6);
}
.topbar__hours:hover i {
transform: scale(1.1);
color: #ffffff;
text-shadow: 0 0 8px rgba(0, 210, 137, 0.6);
}
.topbar__social-link:hover i {
transform: scale(1.2);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
/* Header Styles */
header {
background: #fff;
box-shadow: 0 2px 16px 0 rgba(0,0,0,0.07);
padding: 0.5rem 0;
}
header .container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 0 1.5rem;
}
header .logo {
width: 90px;
min-width: 70px;
display: flex;
align-items: center;
}
header .logo img,
header .logo .custom-logo {
max-width: 180px;
height: auto;
display: block;
}
header .nav {
display: flex;
align-items: center;
gap: 1rem;
}
header .nav a {
color: #111;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
display: flex;
align-items: center;
gap: 0.5em;
background: transparent;
font-weight: 600;
}
header .nav a:hover,
header .nav .nav-item.has-submenu:hover > a,
header .nav .nav-item.has-submenu:focus-within > a {
background: #111;
color: #fff;
}
header .nav .nav-item {
position: relative;
}
header .nav .nav-item.has-submenu > .submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 250px;
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
border-radius: 6px;
z-index: 100;
flex-direction: column;
padding: 0.5rem 0;
border: 1px solid #eee;
}
header .nav .nav-item.has-submenu:hover > .submenu,
header .nav .nav-item.has-submenu:focus-within > .submenu {
display: flex;
}
header .nav .submenu a {
color: #111;
padding: 0.5rem 1.25rem;
font-size: 0.98rem;
border-radius: 0;
background: none;
transition: background 0.2s, color 0.2s;
width: 100%;
}
header .nav .submenu a:hover {
background: #111;
color: #fff;
}
header .call-btn {
display: flex;
align-items: center;
background: #111;
color: #fff;
font-weight: 700;
padding: 0.5rem 1.25rem;
border-radius: 24px;
text-decoration: none;
font-size: 1rem;
transition: background 0.2s, color 0.2s;
margin-left: 1.5rem;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);
gap: 0.5em;
border: none;
}
header .call-btn:hover {
background: #fff;
color: #111;
border: 1px solid #111;
}
header .call-btn .call-ico {
font-size: 1.2em;
margin-right: 0.5em;
}
/* Mobile Menu Icon */
header .menu-icon {
display: none;
flex-direction: column;
cursor: pointer;
gap: 4px;
margin-left: 1.5rem;
}
header .menu-icon span {
display: block;
width: 28px;
height: 3px;
background: #111;
border-radius: 2px;
transition: all 0.3s ease;
}
header .menu-icon.open span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
header .menu-icon.open span:nth-child(2) {
opacity: 0;
}
header .menu-icon.open span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* Mobile Menu Sidebar */
.mobile-menu {
position: fixed;
top: 0;
left: -320px;
width: 320px;
height: 100vh;
background: #fff;
z-index: 1000;
transition: left 0.3s ease;
display: flex;
flex-direction: column;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.mobile-menu.active {
left: 0;
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
border-bottom: 1px solid #eee;
background: #f8f9fa;
}
.mobile-logo {
width: 120px;
}
.mobile-logo img,
.mobile-logo .custom-logo {
width: 100%;
height: auto;
max-width: 90px;
}
.close-menu-btn {
background: none;
border: none;
font-size: 1.5rem;
color: #111;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: background 0.2s;
}
.close-menu-btn:hover {
background: #eee;
}
/* Mobile Navigation */
.mobile-nav {
flex: 1;
padding: 1rem 0;
overflow-y: auto;
}
.mobile-nav a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
color: #111;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
border-bottom: 1px solid #f0f0f0;
transition: background 0.2s;
}
.mobile-nav a:hover {
background: #f8f9fa;
color: #111;
}
.mobile-nav a i {
width: 20px;
text-align: center;
color: #666;
}
/* Mobile Submenu */
.mobile-nav-item.has-submenu .submenu-toggle {
justify-content: space-between;
}
.submenu-arrow {
transition: transform 0.3s ease;
}
.mobile-nav-item.has-submenu.active .submenu-arrow {
transform: rotate(180deg);
}
.mobile-submenu {
display: none;
background: #f8f9fa;
border-top: 1px solid #eee;
}
.mobile-nav-item.has-submenu.active .mobile-submenu {
display: block;
}
.mobile-submenu a {
padding-left: 3rem;
font-size: 0.95rem;
color: #666;
}
.mobile-submenu a:hover {
background: #e9ecef;
color: #111;
}
/* Mobile Menu Footer */
.mobile-menu-footer {
padding: 1.5rem;
border-top: 1px solid #eee;
background: #f8f9fa;
}
.mobile-contact-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
color: #666;
}
.contact-item i {
width: 16px;
color: #999;
}
/* Responsive styles */
@media (max-width: 900px) {
header .container {
gap: 1rem;
}
header .nav {
gap: 1rem;
}
header .call-btn {
padding: 0.5rem 1rem;
font-size: 0.98rem;
}
}
@media (max-width: 768px) {
header .container {
gap: 1rem;
padding: 0 1rem;
}
/* Hide desktop navigation on mobile */
header .desktop-nav {
display: none;
}
/* Show mobile menu icon */
header .menu-icon {
display: flex;
}
/* Adjust mobile menu width for smaller screens */
.mobile-menu {
width: 280px;
left: -280px;
}
}
@media (max-width: 480px) {
.mobile-menu {
width: 100%;
left: -100%;
}
header .container {
padding: 0 0.75rem;
}
header .logo {
width: 80px;
min-width: 60px;
}
}
/*  Hero section style */
/* Hero Section */
.hero-section {
min-height: 100vh;
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
position: relative;
overflow: hidden;
}
/* Background Elements */
.hero-section .bg-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-section .floating-circle {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.hero-section .circle-1 {
width: 200px;
height: 200px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.hero-section .circle-2 {
width: 150px;
height: 150px;
top: 60%;
right: 15%;
animation-delay: 2s;
}
.hero-section .circle-3 {
width: 100px;
height: 100px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
.hero-section .grid-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: 
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridMove 20s linear infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
@keyframes gridMove {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
/* Hero Container */
.hero-section .hero-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 50px 1rem 1rem;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero-section .hero-content {
display: flex;
justify-content: space-between;
align-items: stretch;
width: 100%;
gap: 4rem;
}
.hero-section .content-left {
flex: 0 0 60%;
max-width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-section .content-right {
flex: 0 0 40%;
max-width: 40%;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Left Content */
.hero-section .badge {
display: inline-block;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 0.5rem 1rem;
border-radius: 25px;
font-size: 0.9rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
width: 40%;
}
.hero-section .badge i {
color: white;
}
.hero-section .hero-title {
font-size: 3.5rem;
font-weight: 800;
color: white;
line-height: 1.2;
margin-bottom: 1.5rem;
animation: fadeInUp 1s ease-out 0.3s both;
}
.hero-section .highlight-text {
color: white;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.5);
text-underline-offset: 8px;
}
.hero-section .hero-description {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease-out 0.6s both;
text-align: justify;
}
.hero-section .stats {
display: flex;
gap: 2rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease-out 0.9s both;
}
.hero-section .stat-item {
text-align: center;
}
.hero-section .stat-number {
font-size: 2rem;
font-weight: 700;
color: white;
display: block;
}
.hero-section .stat-label {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin-top: 0.5rem;
}
.hero-section .cta-buttons {
display: flex;
gap: 1rem;
animation: fadeInUp 1s ease-out 1.2s both;
}
.hero-section .btn-primary, .btn-secondary {
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.hero-section .btn-primary {
background: white;
color: black;
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}
.hero-section .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.9);
}
.hero-section .btn-secondary {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.hero-section .btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-3px);
}
/* Right Content - Form */
.hero-section .form-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.hero-section .form-header {
text-align: center;
margin-bottom: 2rem;
}
.hero-section .form-header h3 {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.hero-section .form-header p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.hero-section .contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-section .form-group {
position: relative;
}
.hero-section .input-icon {
position: relative;
display: flex;
align-items: center;
}
.hero-section .input-icon i {
position: absolute;
left: 1rem;
color: rgba(255, 255, 255, 0.5);
z-index: 2;
}
.hero-section .contact-form input,
.hero-section .contact-form select,
.hero-section .contact-form textarea {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: white;
font-size: 1rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.hero-section .contact-form input::placeholder,
.hero-section .contact-form textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.hero-section .contact-form input:focus,
.hero-section .contact-form select:focus,
.hero-section .contact-form textarea:focus {
outline: none;
border-color: white;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.hero-section .contact-form select option {
background: #1a1a1a;
color: white;
}
.hero-section .submit-btn {
background: white;
color: black;
padding: 1rem 2rem;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.hero-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.9);
}
.hero-section .form-footer {
text-align: center;
margin-top: 1rem;
color: rgba(255, 255, 255, 0.6);
font-size: 0.8rem;
}
.hero-section .form-footer i {
color: white;
margin-right: 0.5rem;
}
/* Scroll Indicator */
.hero-section .scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: rgba(255, 255, 255, 0.6);
animation: bounce 2s infinite;
}
.hero-section .scroll-text {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.hero-section .scroll-arrow {
font-size: 1.2rem;
color: white;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
/* Animations */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.hero-section .hero-title {
font-size: 3rem;
}
.hero-section .hero-content {
flex-direction: column;
gap: 2rem;
}
.hero-section .content-left {
max-width: 100%;
flex: 1 1 100%;
}
.hero-section .content-right {
max-width: 100%;
flex: 1 1 100%;
margin-top: 2rem;
justify-content: center;
}
}
@media (max-width: 768px) {
.hero-section .hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.hero-section .hero-title {
font-size: 2.5rem;
text-align: left;
}
.hero-section .stats {
justify-content: center;
}
.hero-section .cta-buttons {
justify-content: center;
flex-wrap: wrap;
}
.hero-section .form-container {
margin-top: 2rem;
}
.hero-section .hero-container {
padding: 100px 1rem 2rem;
}
}
@media (max-width: 480px) {
.hero-section .hero-title {
font-size: 2rem;
}
.hero-section .hero-description {
font-size: 1rem;
text-align: justify;
}
.hero-section .stats {
gap: 1rem;
}
.hero-section .cta-buttons {
flex-direction: column;
align-items: center;
}
.hero-section .btn-primary, .hero-section .btn-secondary {
width: 100%;
max-width: 300px;
justify-content: center;
}
.hero-section .form-container {
padding: 1.5rem;
}
.hero-section .nav-container {
padding: 0 1rem;
}
}
@media (max-width:600px){
.hero-section .badge{
width: 100%;
}
}
/* Hover Effects */
.hero-section .form-container:hover {
transform: translateY(-5px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.hero-section .stat-item:hover .stat-number {
color: rgba(255, 255, 255, 0.9);
transform: scale(1.1);
transition: all 0.3s ease;
}
/* Loading Animation */
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: loading 2s infinite;
z-index: 1;
}
@keyframes loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
} 
.brand-section {
position: relative;
min-height: 100vh;
padding: 80px 20px;
background: #ffffff;
overflow: hidden;
}
/* Animated Background Elements */
.brand-section .background-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.brand-section .shape {
position: absolute;
border-radius: 50%;
background: rgba(0, 0, 0, 0.02);
animation: float 8s ease-in-out infinite;
}
.brand-section .shape:nth-child(1) {
width: 100px;
height: 100px;
top: 15%;
left: 5%;
animation-delay: 0s;
}
.brand-section .shape:nth-child(2) {
width: 150px;
height: 150px;
top: 60%;
right: 10%;
animation-delay: 3s;
}
.brand-section .shape:nth-child(3) {
width: 80px;
height: 80px;
bottom: 25%;
left: 15%;
animation-delay: 6s;
}
.brand-section .shape:nth-child(4) {
width: 120px;
height: 120px;
top: 5%;
right: 35%;
animation-delay: 2s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translateY(-30px) rotate(180deg);
opacity: 0.1;
}
}
/* Moving Dots Pattern */
.brand-section .dots-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
animation: movePattern 25s linear infinite;
}
@keyframes movePattern {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(60px, 60px);
}
}
.brand-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.brand-section .content-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.brand-section .left-content {
padding-right: 40px;
}
.brand-section .about-tag {
display: inline-block;
background: #000000;
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 25px;
animation: slideInLeft 1s ease-out 0.2s both;
}
.brand-section .main-title {
font-size: 2.5rem;
font-weight: 800;
color: #000000;
line-height: 1.2;
margin-bottom: 25px;
animation: slideInLeft 1s ease-out 0.4s both;
}
.brand-section .description {
font-size: 1rem;
color: #666666;
line-height: 1.7;
margin-bottom: 40px;
animation: slideInLeft 1s ease-out 0.6s both;
}
.brand-section .services-card {
background: white;
border: 2px solid #000000;
border-radius: 25px;
padding: 35px;
margin-bottom: 35px;
position: relative;
transition: all 0.3s ease;
box-shadow: 5px 5px 0px rgba(0, 0, 0, 1);
animation: slideInLeft 1s ease-out 0.8s both;
}
.brand-section .card-title {
font-size: 1.3rem;
font-weight: 700;
color: #000000;
margin-bottom: 25px;
}
.brand-section .services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.brand-section .service-item {
display: flex;
align-items: center;
font-size: 0.95rem;
color: #333333;
font-weight: 500;
transition: all 0.3s ease;
}
.brand-section .service-item:hover {
color: #000000;
transform: translateX(5px);
}
.brand-section .service-item::before {
content: '●';
color: #000000;
font-size: 8px;
margin-right: 12px;
transition: all 0.3s ease;
}
.brand-section .service-item:hover::before {
transform: scale(1.3);
}
.brand-section .cta-button {
display: inline-flex;
align-items: center;
background: #000000;
color: white;
padding: 12px 28px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
animation: slideInLeft 1s ease-out 1s both;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.brand-section .cta-button:hover {
background: #333333;
transform: translateX(5px);
}
.brand-section .cta-button::after {
content: '→';
margin-left: 12px;
font-size: 16px;
transition: all 0.3s ease;
}
.brand-section .cta-button:hover::after {
transform: translateX(3px);
}
.brand-section .right-content {
position: relative;
animation: slideInRight 1s ease-out 0.6s both;
}
.brand-section .images-container {
position: relative;
height: 450px;
width: 100%;
}
.brand-section .team-image {
position: absolute;
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
background: #f5f5f5;
}
.brand-section .team-image:hover {
transform: scale(1.02);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.brand-section .team-image img {
width: 100%;
height: 100%;
object-fit: cover;
/* filter: grayscale(100%); */
transition: all 0.3s ease;
}
.brand-section .team-image:hover img {
filter: grayscale(0%);
}
.brand-section .main-image {
width: 400px;
height: 420px;
top: 0;
right: 0;
z-index: 3;
}
.brand-section .secondary-image {
width: 250px;
height: 250px;
bottom: -100px;
left: 40px;
z-index: 4;
border: 15px solid white;
}
.brand-section .experience-badge {
position: absolute;
bottom: 0;
right: 80px;
background: white;
border: 2px solid #000000;
border-radius: 20px;
padding: 10px 30px;
z-index: 4;
box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
animation: bounce 3s infinite;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.brand-section .experience-number {
font-size: 1.7rem;
font-weight: 600;
color: #000000;
margin-bottom: 5px;
}
.brand-section .experience-text {
font-size: 0.85rem;
color: #666666;
font-weight: 500;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
/* Animation Keyframes */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.brand-section .main-title {
font-size: 2.5rem;
}
.brand-section .content-wrapper {
grid-template-columns: 1fr;
gap: 50px;
}
.brand-section .left-content {
padding-right: 0;
}
.brand-section .images-container {
height: 350px;
}
.brand-section .main-image {
width: 250px;
height: 180px;
}
.brand-section .secondary-image {
width: 180px;
height: 130px;
}
.brand-section .experience-badge {
right: 50px;
padding: 15px 25px;
}
}
.services-section {
min-height: 100vh;
background: #000;
padding: 100px 20px;
position: relative;
overflow: hidden;
}
.services-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.services-section .container {
max-width: 1200px;
margin: 0 auto;
}
.services-section .section-title {
text-align: center;
color: white;
margin-bottom: 60px;
position: relative;
}
.services-section .title-main {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}
.services-section .title-sub {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}
.services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.services-section .service-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 0.8s forwards;
}
.services-section .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}
.services-section .service-card::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: 0.5s;
}
.services-section .service-card:hover::before {
left: 100%;
}
.services-section .icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: transform 0.3s ease;
}
.services-section .service-card:hover .icon-wrapper {
transform: scale(1.1);
}
.services-section .icon-wrapper i {
font-size: 35px;
color: white;
position: relative;
z-index: 1;
}
.services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}
.services-section .service-description {
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 25px;
}
.services-section .learn-more {
display: inline-block;
padding: 10px 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 25px;
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.services-section .learn-more:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.services-section .view-all-wrapper {
margin-top: 40px;
text-align: center;
}
.services-section .view-all-wrapper .btn-modern {
display: inline-block;
padding: 15px 35px;
background: var(--gradient);
border-radius: 30px;
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.services-section .view-all-wrapper .btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
background:linear-gradient(45deg, rgb(255 255 255), rgb(255 255 255));
}
.services-section .view-all-wrapper .btn-modern:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animation delays for cards */
.services-section .service-card:nth-child(1) {
animation-delay: 0.4s;
}
.services-section .service-card:nth-child(2) {
animation-delay: 0.6s;
}
.services-section .service-card:nth-child(3) {
animation-delay: 0.8s;
}
.services-section .service-card:nth-child(4) {
animation-delay: 1s;
}
.services-section .service-card:nth-child(5) {
animation-delay: 1.2s;
}
.services-section .service-card:nth-child(6) {
animation-delay: 1.4s;
}
/* Responsive Design */
@media (max-width: 768px) {
.services-section .services-section {
padding: 60px 15px;
}
.services-section .title-main {
font-size: 2rem;
}
.services-section .title-sub {
font-size: 1rem;
padding: 0 20px;
}
.services-section .services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.services-section .service-card {
padding: 30px 20px;
}
.services-section .icon-wrapper {
width: 70px;
height: 70px;
}
.services-section .icon-wrapper i {
font-size: 30px;
}
}
.home-stats-section {
padding: 100px 0;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}
.home-stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 50% 50%,
rgba(36, 36, 225, 0.03) 0%,
transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}
.home-stats-section .container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 80px;
position: relative;
z-index: 1;
}
.home-stats-section .text-content {
flex: 1;
position: relative;
}
.home-stats-section .glowing-line {
width: 3px;
height: 100px;
background: #000;
position: absolute;
left: -20px;
top: 0;
animation: glow 2s ease-in-out infinite;
}
.home-stats-section .headline {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: slideUpFade 1s forwards;
}
.home-stats-section .headline span {
display: block;
background: #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-stats-section .description {
font-size: 1.2rem;
color: #555;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0;
animation: slideUpFade 1s 0.3s forwards;
}
.home-stats-section .stats-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
perspective: 1000px;
}
.home-stats-section .stat-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
transform: translateZ(0);
transition: transform 0.5s;
position: relative;
overflow: hidden;
opacity: 0;
animation: cardAppear 0.5s forwards;
}
.home-stats-section .stat-card:nth-child(1) {
animation-delay: 0.4s;
}
.home-stats-section .stat-card:nth-child(2) {
animation-delay: 0.6s;
}
.home-stats-section .stat-card:nth-child(3) {
animation-delay: 0.8s;
}
.home-stats-section .stat-card:nth-child(4) {
animation-delay: 1s;
}
.home-stats-section .stat-card:hover {
transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
}
.home-stats-section .stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
transparent,
rgba(36, 36, 225, 0.1),
transparent
);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}
.home-stats-section .stat-number {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.home-stats-section .stat-number::after {
content: "+";
font-size: 2rem;
position: absolute;
top: 0;
right: -20px;
background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-stats-section .stat-label {
font-size: 1.2rem;
color: #555;
font-weight: 600;
position: relative;
}
.home-stats-section .floating-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
.home-stats-section .particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
animation: float 20s linear infinite;
}
.home-stats-section .particle:nth-child(1) {
left: 10%;
top: 20%;
animation-delay: 0s;
}
.home-stats-section .particle:nth-child(2) {
left: 30%;
top: 50%;
animation-delay: 2s;
}
.home-stats-section .particle:nth-child(3) {
left: 50%;
top: 30%;
animation-delay: 4s;
}
.home-stats-section .particle:nth-child(4) {
left: 70%;
top: 60%;
animation-delay: 6s;
}
.home-stats-section .particle:nth-child(5) {
left: 90%;
top: 40%;
animation-delay: 8s;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes glow {
0%,
100% {
opacity: 0.5;
box-shadow: 0 0 10px rgba(36, 36, 225, 0.5);
}
50% {
opacity: 1;
box-shadow: 0 0 20px rgba(36, 36, 225, 0.8);
}
}
@keyframes cardAppear {
from {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
.home-stats-section .typing-effect {
overflow: hidden;
border-right: 3px solid rgba(36, 36, 225, 1);
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: rgba(36, 36, 225, 1);
}
}
@media (max-width: 1024px) {
.home-stats-section .container {
flex-direction: column;
text-align: center;
}
.home-stats-section.glowing-line {
display: none;
}
.home-stats-section .headline {
font-size: 3rem;
}
.home-stats-section .stats-grid {
grid-template-columns: 1fr;
width: 100%;
}
}
@media (max-width: 768px) {
.home-stats-section .headline {
font-size: 2rem !important;
}
}
.home-why-choose-section {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
padding: 100px 20px;
min-height: 100vh;
display: flex;
align-items: center;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}
.home-why-choose-section .glass-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.home-why-choose-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.home-why-choose-section .section-header {
text-align: center;
margin-bottom: 80px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards;
}
.home-why-choose-section .title {
font-size: 3.5rem;
color: white;
font-weight: 800;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.home-why-choose-section .title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: white;
border-radius: 2px;
}
.home-why-choose-section .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.home-why-choose-section .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.home-why-choose-section .feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
text-align: center;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.home-why-choose-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.home-why-choose-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}
.home-why-choose-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}
.home-why-choose-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}
.home-why-choose-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home-why-choose-section .feature-icon i {
color: white;
font-size: 2rem;
}
.home-why-choose-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
animation: pulse 2s infinite;
}
.home-why-choose-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}
.home-why-choose-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}
.home-why-choose-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.home-why-choose-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.home-why-choose-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes shine {
0% {
transform: translate(-100%, -100%) rotate(45deg);
}
100% {
transform: translate(100%, 100%) rotate(45deg);
}
}
@media (max-width: 992px) {
.home-why-choose-section .features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.home-why-choose-section .features-grid {
grid-template-columns: 1fr;
}
.home-why-choose-section .title {
font-size: 2.5rem;
}
}
.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}
.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
animation: rotateBackground 15s infinite linear;
pointer-events: none;
}
@keyframes rotateBackground {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .left-section {
position: relative;
}
.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}
.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}
.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
border-radius: 2px;
}
.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
transition: height 0.3s ease;
}
.contact-wrapper .info-card:hover::before {
height: 100%;
}
.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}
.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}
.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}
.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.3);
}
.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}
.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}
.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}
.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}
.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}
.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}
.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}
.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}
.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}
.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.contact-wrapper .submit-button::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: 0.5s;
}
.contact-wrapper .submit-button:hover::before {
left: 100%;
}
.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}
.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}
@keyframes floatAnimation {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}
.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}
.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}
.contact-wrapper .social-links a {
text-decoration: none;
color: white;
}
.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}
.contact-wrapper .status-message.show {
transform: translateX(0);
}
@media (max-width: 1200px) {
.contact-wrapper .contact-container {
grid-template-columns: 1fr;
max-width: 800px;
}
}
@media (max-width: 768px) {
.contact-wrapper .contact-container {
padding: 20px;
}
.contact-wrapper .contact-header h2 {
font-size: 2.5em;
}
.contact-wrapper .right-section {
padding: 30px;
}
}
@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
font-size: 2em;
}
.contact-wrapper .info-content {
flex-direction: column;
text-align: center;
}
.contact-wrapper .icon-box {
margin: 0 auto;
}
}
.our-course {
min-height: 90vh;
background: linear-gradient(135deg, #4f46e5, #3b82f6, #60a5fa);
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.our-course .section-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
rgba(255, 255, 255, 0.05) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
z-index: 1;
}
.our-course .course-container {
max-width: 1200px;
width: 95%;
background: white;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
z-index: 10;
transition: transform 0.4s ease, box-shadow 0.4s ease;
overflow: hidden;
position: relative;
}
.our-course .course-container:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.our-course .course-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #4f46e5, #3b82f6, #60a5fa);
}
.our-course .course-wrapper {
display: flex;
gap: 2rem;
padding: 2rem;
align-items: center;
}
.our-course .course-wrapper .left-container {
flex: 0.8;
display: flex;
justify-content: center;
align-items: center;
padding: 0.8rem;
}
.our-course .course-wrapper .left-container img {
width: 100%;
height: auto;
max-width: 320px;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
transition: transform 0.4s ease;
}
.our-course .course-wrapper .left-container img:hover {
transform: scale(1.05);
}
.our-course .course-wrapper .right-container {
flex: 1.2;
padding: 0.8rem;
}
.our-course .course-container .right-container .course-title h3 {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.8rem;
background: linear-gradient(90deg, #4f46e5, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.our-course .course-container .right-container .course-description p {
font-size: 1rem;
color: #64748b;
line-height: 1.5;
margin-bottom: 1.2rem;
}
.our-course .course-review {
margin: 1.2rem 0;
padding: 1rem;
background: #f8fafc;
border-radius: 16px;
text-align: left;
border: 1px solid #e2e8f0;
transition: transform 0.3s ease;
}
.our-course .course-review:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.our-course .review {
display: flex;
align-items: center;
gap: 0.8rem;
}
.our-course .rating-number {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
}
.our-course .fa-star {
color: #eab308;
font-size: 1rem;
}
.our-course .total-review {
color: #64748b;
font-size: 0.9rem;
}
.our-course .job-role {
margin: 1.2rem 0;
padding: 0.8rem 1rem;
background: #f0f7ff;
border-radius: 16px;
position: relative;
border: 1px solid #dbeafe;
transition: transform 0.3s ease;
display: flex;
align-items: center;
}
.our-course .job-role:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.our-course .job-role-label {
font-size: 0.9rem;
color: black;
font-weight: 500;
margin-right: 1rem;
white-space: nowrap;
}
.our-course .job-roles-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex: 1;
}
.our-course .job-role-pill {
background: #dbeafe;
color: #3b82f6;
border-radius: 50px;
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.3s ease;
}
.our-course .job-role-pill i {
font-size: 0.8rem;
}
.our-course .job-role-pill:hover {
background: #3b82f6;
color: white;
transform: translateY(-2px);
}
.our-course .job-role-icon {
width: 45px;
height: 45px;
background: #dbeafe;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #3b82f6;
font-size: 1.3rem;
margin-left: 1rem;
}
.our-course .course-info {
display: flex;
justify-content: space-between;
padding: 1rem 1.2rem;
background: #f8fafc;
border-radius: 16px;
margin: 1.2rem 0;
border: 1px solid #e2e8f0;
gap: 1rem;
}
.our-course .course-box {
display: flex;
align-items: center;
gap: 0.8rem;
flex: 1;
transition: transform 0.3s ease;
}
.our-course .course-box:hover {
transform: translateY(-5px);
}
.our-course .course-box .icon {
width: 42px;
height: 42px;
background: #e0e7ff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #4f46e5;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.our-course .course-box:hover .icon {
background: #4f46e5;
color: white;
}
.our-course .course-text p {
font-size: 0.85rem;
color: #64748b;
}
.our-course .course-text span {
font-weight: 600;
color: #1e293b;
font-size: 1rem;
}
.our-course .btn-container {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.our-course .download-btn {
padding: 0.8rem 1.5rem;
background: #4f46e5;
color: white;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
border: none;
cursor: pointer;
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}
.our-course .download-btn:hover {
background: #4338ca;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);
}
.our-course .learn-btn {
padding: 0.8rem 1.5rem;
border: 2px solid #4f46e5;
color: #4f46e5;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
background: transparent;
cursor: pointer;
}
.our-course .learn-btn:hover {
background: #f5f3ff;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(79, 70, 229, 0.1);
}
@media (max-width: 992px) {
.our-course .course-wrapper {
padding: 1.8rem;
gap: 1.8rem;
}
.our-course .course-container .right-container .course-title h3 {
font-size: 1.7rem;
}
}
@media (max-width: 768px) {
.our-course .course-wrapper {
flex-direction: column;
padding: 1.5rem;
}
.our-course .course-wrapper .left-container,
.our-course .course-wrapper .right-container {
flex: 1;
width: 100%;
}
.our-course .course-info {
flex-direction: column;
gap: 1.2rem;
}
.our-course .btn-container {
flex-direction: column;
gap: 0.8rem;
}
.our-course .download-btn,
.our-course .learn-btn {
width: 100%;
text-align: center;
}
.our-course .job-role {
flex-direction: column;
align-items: flex-start;
}
.our-course .job-role-label {
margin-bottom: 0.5rem;
margin-right: 0;
}
.our-course .job-role-icon {
position: absolute;
top: 0.8rem;
right: 0.8rem;
margin-left: 0;
}
}
@media (max-width: 480px) {
.our-course {
padding: 0.8rem;
}
.our-course .course-wrapper {
padding: 0.8rem;
}
.our-course .course-container .right-container .course-title h3 {
font-size: 1.4rem;
}
.our-course .course-container .right-container .course-description p {
font-size: 0.95rem;
}
.our-course .course-review,
.job-role,
.course-info {
padding: 0.8rem;
}
.our-course .rating-number {
font-size: 1.2rem;
}
}
.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
.faq-section .faq-header {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}
.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}
.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}
.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}
.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.faq-section .faq-item.active .faq-question {
border-left-color: rgba(36, 36, 225, 1);
}
.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}
.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
font-size: 1.2em;
transition: all 0.3s ease;
}
.faq-section .faq-item.active .question-icon {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
color: white;
transform: rotateY(360deg);
}
.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}
.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}
.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}
.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.03) 35%,
rgba(11, 205, 240, 0.03) 100%
);
}
.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}
.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}
.top-bar {
background: linear-gradient(to right, #000000, #1a1a1a);
color: white;
padding: 12px 0;
position: relative;
overflow: hidden;
}
.top-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
transparent 45%,
rgba(255, 255, 255, 0.1) 48%,
rgba(255, 255, 255, 0.1) 52%,
transparent 55%
);
animation: shine 3s infinite;
}
@keyframes shine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.top-bar .contact-info {
display: flex;
justify-content: flex-end;
gap: 30px;
align-items: center;
}
.top-bar .contact-info a,
.top-bar .contact-info span {
color: white;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.top-bar .contact-info i {
font-size: 16px;
background: rgba(255, 255, 255, 0.1);
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
}
.top-bar .contact-info a:hover i {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.top-bar .contact-info a:hover {
transform: translateY(-2px);
}
.services-section {
min-height: 100vh;
background: var(--gradient);
padding: 100px 20px;
position: relative;
overflow: hidden;
}
.services-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.services-section .container {
max-width: 1200px;
margin: 0 auto;
}
.services-section .section-title {
text-align: center;
color: white;
margin-bottom: 60px;
position: relative;
}
.services-section .title-main {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}
.services-section .title-sub {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}
.services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.services-section .service-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 0.8s forwards;
}
.services-section .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}
.services-section .service-card::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: 0.5s;
}
.services-section .service-card:hover::before {
left: 100%;
}
.services-section .icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: transform 0.3s ease;
}
.services-section .service-card:hover .icon-wrapper {
transform: scale(1.1);
}
.services-section .icon-wrapper i {
font-size: 35px;
color: white;
position: relative;
z-index: 1;
}
.services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}
.services-section .service-description {
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 25px;
}
.services-section .learn-more {
display: inline-block;
padding: 10px 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 25px;
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.services-section .learn-more:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.services-section .view-all-wrapper {
margin-top: 40px;
text-align: center;
}
.services-section .view-all-wrapper .btn-modern {
display: inline-block;
padding: 15px 35px;
background: linear-gradient(45deg, #000, #000000);
border-radius: 30px;
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.services-section .view-all-wrapper .btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
background: linear-gradient(45deg, rgb(255 255 255), rgb(255 255 255));
}
.services-section .view-all-wrapper .btn-modern:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animation delays for cards */
.services-section .service-card:nth-child(1) {
animation-delay: 0.4s;
}
.services-section .service-card:nth-child(2) {
animation-delay: 0.6s;
}
.services-section .service-card:nth-child(3) {
animation-delay: 0.8s;
}
.services-section .service-card:nth-child(4) {
animation-delay: 1s;
}
.services-section .service-card:nth-child(5) {
animation-delay: 1.2s;
}
.services-section .service-card:nth-child(6) {
animation-delay: 1.4s;
}
/* Responsive Design */
@media (max-width: 768px) {
.services-section .services-section {
padding: 60px 15px;
}
.services-section .title-main {
font-size: 2rem;
}
.services-section .title-sub {
font-size: 1rem;
padding: 0 20px;
}
.services-section .services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.services-section .service-card {
padding: 30px 20px;
}
.services-section .icon-wrapper {
width: 70px;
height: 70px;
}
.services-section .icon-wrapper i {
font-size: 30px;
}
}
.home-stats-section {
padding: 100px 0;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}
.home-stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 50% 50%,
rgba(36, 36, 225, 0.03) 0%,
transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}
.home-stats-section .container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 80px;
position: relative;
z-index: 1;
}
.home-stats-section .text-content {
flex: 1;
position: relative;
}
.home-stats-section .glowing-line {
width: 3px;
height: 100px;
background: #000;
position: absolute;
left: -20px;
top: 0;
animation: glow 2s ease-in-out infinite;
}
.home-stats-section .headline {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: slideUpFade 1s forwards;
}
.home-stats-section .headline span {
display: block;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-stats-section .description {
font-size: 1.2rem;
color: #555;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0;
animation: slideUpFade 1s 0.3s forwards;
}
.home-stats-section .stats-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
perspective: 1000px;
}
.home-stats-section .stat-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
transform: translateZ(0);
transition: transform 0.5s;
position: relative;
overflow: hidden;
opacity: 0;
animation: cardAppear 0.5s forwards;
}
.home-stats-section .stat-card:nth-child(1) {
animation-delay: 0.4s;
}
.home-stats-section .stat-card:nth-child(2) {
animation-delay: 0.6s;
}
.home-stats-section .stat-card:nth-child(3) {
animation-delay: 0.8s;
}
.home-stats-section .stat-card:nth-child(4) {
animation-delay: 1s;
}
.home-stats-section .stat-card:hover {
transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
}
.home-stats-section .stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
transparent,
rgba(36, 36, 225, 0.1),
transparent
);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}
.home-stats-section .stat-number {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.home-stats-section .stat-number::after {
content: "+";
font-size: 2rem;
position: absolute;
top: 0;
right: -20px;
background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-stats-section .stat-label {
font-size: 1.2rem;
color: #555;
font-weight: 600;
position: relative;
}
.home-stats-section .floating-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
.home-stats-section .particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
animation: float 20s linear infinite;
}
.home-stats-section .particle:nth-child(1) {
left: 10%;
top: 20%;
animation-delay: 0s;
}
.home-stats-section .particle:nth-child(2) {
left: 30%;
top: 50%;
animation-delay: 2s;
}
.home-stats-section .particle:nth-child(3) {
left: 50%;
top: 30%;
animation-delay: 4s;
}
.home-stats-section .particle:nth-child(4) {
left: 70%;
top: 60%;
animation-delay: 6s;
}
.home-stats-section .particle:nth-child(5) {
left: 90%;
top: 40%;
animation-delay: 8s;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes glow {
0%,
100% {
opacity: 0.5;
box-shadow: 0 0 10px rgba(36, 36, 225, 0.5);
}
50% {
opacity: 1;
box-shadow: 0 0 20px rgba(36, 36, 225, 0.8);
}
}
@keyframes slideUpFade {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardAppear {
from {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
.home-stats-section .typing-effect {
overflow: hidden;
border-right: 3px solid rgba(36, 36, 225, 1);
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: rgba(36, 36, 225, 1);
}
}
@media (max-width: 1024px) {
.home-stats-section .container {
flex-direction: column;
text-align: center;
}
.home-stats-section.glowing-line {
display: none;
}
.home-stats-section .headline {
font-size: 3rem;
}
.home-stats-section .stats-grid {
grid-template-columns: 1fr;
width: 100%;
}
}
.home-why-choose-section {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
padding: 100px 20px;
min-height: 100vh;
display: flex;
align-items: center;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}
.home-why-choose-section .glass-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.home-why-choose-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.home-why-choose-section .section-header {
text-align: center;
margin-bottom: 80px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards;
}
.home-why-choose-section .title {
font-size: 3.5rem;
color: white;
font-weight: 800;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.home-why-choose-section .title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: white;
border-radius: 2px;
}
.home-why-choose-section .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.home-why-choose-section .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.home-why-choose-section .feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
text-align: center;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.home-why-choose-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.home-why-choose-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}
.home-why-choose-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}
.home-why-choose-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}
.home-why-choose-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home-why-choose-section .feature-icon i {
color: white;
font-size: 2rem;
}
.home-why-choose-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
animation: pulse 2s infinite;
}
.home-why-choose-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}
.home-why-choose-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}
.home-why-choose-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.home-why-choose-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.home-why-choose-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes shine {
0% {
transform: translate(-100%, -100%) rotate(45deg);
}
100% {
transform: translate(100%, 100%) rotate(45deg);
}
}
@media (max-width: 992px) {
.home-why-choose-section .features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.home-why-choose-section .features-grid {
grid-template-columns: 1fr;
}
.home-why-choose-section .title {
font-size: 2.5rem;
}
}
.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}
.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
animation: rotateBackground 15s infinite linear;
pointer-events: none;
}
@keyframes rotateBackground {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .left-section {
position: relative;
}
.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}
.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}
.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
border-radius: 2px;
}
.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
transition: height 0.3s ease;
}
.contact-wrapper .info-card:hover::before {
height: 100%;
}
.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}
.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}
.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}
.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.3);
}
.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}
.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}
.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}
.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}
.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}
.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}
.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}
.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}
.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}
.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.contact-wrapper .submit-button::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: 0.5s;
}
.contact-wrapper .submit-button:hover::before {
left: 100%;
}
.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}
.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}
@keyframes floatAnimation {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}
.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}
.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}
.contact-wrapper .social-links a {
text-decoration: none;
color: white;
}
.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}
.contact-wrapper .status-message.show {
transform: translateX(0);
}
@media (max-width: 1200px) {
.contact-wrapper .contact-container {
grid-template-columns: 1fr;
max-width: 800px;
}
}
@media (max-width: 768px) {
.contact-wrapper .contact-container {
padding: 20px;
}
.contact-wrapper .contact-header h2 {
font-size: 2.5em;
}
.contact-wrapper .right-section {
padding: 30px;
}
}
@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
font-size: 2em;
}
.contact-wrapper .info-content {
flex-direction: column;
text-align: center;
}
.contact-wrapper .icon-box {
margin: 0 auto;
}
}
.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
.faq-section .faq-header {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}
.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}
.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}
.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}
.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.faq-section .faq-item.active .faq-question {
border-left-color: rgba(36, 36, 225, 1);
}
.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}
.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
font-size: 1.2em;
transition: all 0.3s ease;
}
.faq-section .faq-item.active .question-icon {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
color: white;
transform: rotateY(360deg);
}
.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}
.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}
.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}
.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.03) 35%,
rgba(11, 205, 240, 0.03) 100%
);
}
.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}
.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}
@keyframes slideIn {
to {
transform: translateY(0);
opacity: 1;
}
}
.faq-section .search-box {
position: relative;
max-width: 500px;
margin: 30px auto 0;
z-index: 2;
}
.faq-section .search-box input {
width: 100%;
padding: 15px 25px;
border-radius: 30px;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 1em;
outline: none;
transition: all 0.3s ease;
}
.faq-section .search-box input:focus {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.faq-section .faq-container {
grid-template-columns: 1fr !important;
padding: 40px 20px;
}
.faq-section .faq-header {
padding: 40px 20px;
}
.faq-section .faq-header h1 {
font-size: 2em;
}
}
.faq-section .highlight {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.2) 35%,
rgba(11, 205, 240, 0.2) 100%
);
padding: 2px 5px;
border-radius: 4px;
}
.footer-wrapper {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}
.footer-wrapper .footer-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: moveGrid 15s linear infinite;
}
@keyframes moveGrid {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-40px, -40px);
}
}
.footer-wrapper .footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px 30px;
position: relative;
z-index: 1;
color: white;
}
.footer-wrapper .footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-wrapper .footer-section h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.footer-wrapper .footer-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: white;
transition: width 0.3s ease;
}
.footer-wrapper .footer-section:hover h3::after {
width: 100%;
}
.footer-wrapper .footer-about p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
opacity: 0.9;
}
.footer-wrapper .social-links {
display: flex;
gap: 15px;
}
.footer-wrapper .social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.footer-wrapper .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.footer-wrapper .social-links a:hover::before {
transform: translateY(0);
}
.footer-wrapper .social-links a i {
color: white;
font-size: 18px;
transition: all 0.3s ease;
z-index: 1;
}
.footer-wrapper .social-links a:hover i {
color: rgba(36, 36, 225, 1);
transform: scale(1.2);
}
.footer-wrapper .footer-links ul {
list-style: none;
padding: 0;
}
.footer-wrapper .footer-links li {
margin-bottom: 15px;
}
.footer-wrapper .footer-links a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
opacity: 0.9;
}
.footer-wrapper .footer-links a i {
font-size: 14px;
transition: transform 0.3s ease;
}
.footer-wrapper .footer-links a:hover {
opacity: 1;
transform: translateX(8px);
}
.footer-wrapper .footer-links a:hover i {
transform: scale(1.2);
}
.footer-wrapper .contact-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-wrapper .contact-item {
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
}
.footer-wrapper .contact-item:hover {
transform: translateX(8px);
}
.footer-wrapper .contact-item i {
width: 35px;
height: 35px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}
.footer-wrapper .contact-item:hover i {
background: white;
color: rgba(16, 16, 16);
transform: rotate(360deg);
}
.footer-wrapper .divider-area {
position: relative;
padding: 20px 0;
margin: 40px 0 20px;
}
.footer-wrapper .divider-line {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.3),
transparent
);
position: relative;
}
.footer-wrapper .divider-line::before,
.footer-wrapper .divider-line::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-wrapper .divider-line::before {
left: 20%;
}
.footer-wrapper .divider-line::after {
right: 20%;
}
.footer-wrapper .divider-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(36, 36, 225, 1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.footer-wrapper .divider-icon i {
color: white;
font-size: 16px;
}
.footer-wrapper .footer-bottom {
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
display: flex;
align-items: center;
gap: 20px;
}
.footer-wrapper .footer-bottom a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: all 0.3s ease;
}
.footer-wrapper .footer-bottom a:hover {
opacity: 1;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-wrapper .copyright-text {
position: relative;
padding-left: 25px;
}
.footer-wrapper .copyright-text::before {
content: "\f1f9";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
animation: spin 4s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@media (max-width: 1024px) {
.footer-wrapper .footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.footer-wrapper .footer-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-wrapper .footer-section {
text-align: center;
}
.footer-wrapper .footer-section h3::after {
left: 50%;
transform: translateX(-50%);
}
.footer-wrapper .social-links {
justify-content: center;
}
.footer-wrapper .footer-links a {
justify-content: center;
}
.footer-wrapper .contact-item {
justify-content: center;
}
.footer-wrapper .footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
justify-content: center;
width: 100%;
}
}
/* Services Page Css Start */
.service-page-services-section {
min-height: 100vh;
padding: 80px 20px;
background: white;
position: relative;
overflow: hidden;
}
.service-page-services-section .bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.service-page-services-section .bg-bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
animation: float 8s ease-in-out infinite;
}
.service-page-services-section .bg-bubble:nth-child(1) {
width: 100px;
height: 100px;
left: 10%;
top: 20%;
animation-delay: 0s;
}
.service-page-services-section .bg-bubble:nth-child(2) {
width: 150px;
height: 150px;
left: 35%;
top: 70%;
animation-delay: 1s;
}
.service-page-services-section .bg-bubble:nth-child(3) {
width: 80px;
height: 80px;
left: 50%;
top: 50%;
animation-delay: 2s;
}
.service-page-services-section .bg-bubble:nth-child(4) {
width: 120px;
height: 120px;
left: 70%;
top: 30%;
animation-delay: 3s;
}
.service-page-services-section .bg-bubble:nth-child(5) {
width: 200px;
height: 200px;
left: 85%;
top: 80%;
animation-delay: 4s;
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
.service-page-services-section .services-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #333;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
}
.service-page-services-section .services-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
animation: widthGrow 1s ease forwards;
}
.service-page-services-section .services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 20px;
position: relative;
z-index: 1;
}
.service-page-services-section .service-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-decoration: none;
}
.service-page-services-section .service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.service-page-services-section .service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 20px;
opacity: 0;
transition: all 0.5s ease;
}
.service-page-services-section .service-card:hover::before {
opacity: 1;
}
.service-page-services-section .service-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.5s ease;
}
.service-page-services-section .service-card:hover .service-icon {
transform: rotateY(360deg);
}
.service-page-services-section .service-icon i {
font-size: 35px;
color: white;
}
.service-page-services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}
.service-page-services-section .service-description {
font-size: 1rem;
line-height: 1.6;
color: #666;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes widthGrow {
from {
width: 0;
}
to {
width: 100px;
}
}
@media (max-width: 1024px) {
.service-page-services-section .services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.service-page-services-section .services-grid {
grid-template-columns: 1fr;
}
}
/* Contact Page Css Start */
.contact-page-main-section {
min-height: 80vh;
padding: 20px;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.contact-page-main-section .contact-page-wrapper {
width: 100%;
max-width: 1000px;
background: white;
border-radius: 30px;
display: flex;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-page-main-section .contact-page-wrapper::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
top: -100px;
left: -100px;
z-index: 0;
}
.contact-page-main-section .contact-page-wrapper::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
bottom: -75px;
right: -75px;
z-index: 0;
}
/* फॉर्म सेक्शन अपडेट्स */
.contact-page-main-section .contact-form-section {
flex: 1;
padding: 25px;
background: white;
}
.contact-page-main-section .section-title {
font-size: 2.2em;
margin-bottom: 25px;
color: #333;
position: relative;
animation: slideIn 1s ease-out;
font-weight: 600;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-color: transparent;
}
.contact-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
}
/* इनपुट स्टाइल्स इम्प्रूवमेंट */
.contact-page-main-section .input-group {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
transition: all 0.3s ease;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #eee;
border-radius: 10px;
outline: none;
background: #f8f9fa;
transition: all 0.3s ease;
color: #333;
}
.contact-page-main-section .input-group input:focus,
.contact-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
background: white;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}
.contact-page-main-section .input-group label {
position: absolute;
left: 15px;
top: 15px;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
padding: 0 5px;
background: transparent;
font-size: 14px;
}
.contact-page-main-section .input-group input:focus ~ label,
.contact-page-main-section .input-group textarea:focus ~ label,
.contact-page-main-section .input-group input:valid ~ label,
.contact-page-main-section .input-group textarea:valid ~ label {
top: -10px;
left: 10px;
font-size: 12px;
color: rgba(36, 36, 225, 1);
background: white;
}
.contact-page-main-section .input-group textarea {
min-height: 80px;
}
/* इन्फो सेक्शन अपडेट्स */
.contact-page-main-section .contact-info-section {
flex: 1;
padding: 25px;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
color: white;
position: relative;
overflow: hidden;
z-index: 1;
}
.contact-page-main-section .contact-info-section::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -150px;
right: -150px;
z-index: -1;
}
.contact-page-main-section .info-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 15px;
transform: translateX(0);
opacity: 1;
position: relative;
z-index: 2;
}
.contact-page-main-section .info-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.contact-page-main-section .info-card h3 {
color: white;
font-size: 1.1em;
margin-bottom: 5px;
font-weight: 500;
}
.contact-page-main-section .info-card p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9em;
line-height: 1.4;
}
.contact-page-main-section .info-icon {
width: 45px;
height: 45px;
background: white;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 24px;
color: rgba(36, 36, 225, 1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.contact-page-main-section .info-card:hover .info-icon {
transform: rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
}
/* रेस्पोंसिव डिज़ाइन अपडेट्स */
@media (max-width: 1200px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 900px;
}
}
@media (max-width: 1024px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 800px;
}
.contact-page-main-section .section-title {
font-size: 2em;
}
}
@media (max-width: 768px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 600px;
flex-direction: column;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 25px;
width: 100%;
}
.contact-page-main-section .section-title {
font-size: 1.8em;
margin-bottom: 20px;
}
.contact-page-main-section .input-group {
margin-bottom: 15px;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
font-size: 14px;
}
.contact-page-main-section .info-card {
padding: 15px;
margin-bottom: 15px;
flex-direction: row;
align-items: center;
}
.contact-page-main-section .info-icon {
width: 40px;
height: 40px;
font-size: 18px;
margin-bottom: 0;
margin-right: 15px;
}
.contact-page-main-section .social-links {
justify-content: center;
margin-top: 20px;
}
}
@media (max-width: 576px) {
.contact-page-main-section .contact-container {
padding: 15px;
min-height: auto;
}
.contact-page-main-section .contact-page-wrapper {
border-radius: 20px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 20px;
}
.contact-page-main-section .section-title {
font-size: 1.6em;
}
.contact-page-main-section .input-group label {
font-size: 13px;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
padding: 8px;
font-size: 14px;
}
.contact-page-main-section .submit-btn {
width: 100%;
padding: 12px;
font-size: 14px;
}
.contact-page-main-section .info-card {
padding: 12px;
margin-bottom: 12px;
}
.contact-page-main-section .info-card h3 {
font-size: 1em;
}
.contact-page-main-section .info-card p {
font-size: 0.85em;
}
.contact-page-main-section .social-icon {
width: 35px;
height: 35px;
font-size: 16px;
}
}
@media (max-width: 380px) {
.contact-page-main-section .contact-container {
padding: 10px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 15px;
}
.contact-page-main-section .section-title {
font-size: 1.4em;
}
.contact-page-main-section .info-icon {
width: 35px;
height: 35px;
font-size: 16px;
margin-right: 10px;
}
.contact-page-main-section .social-links {
gap: 10px;
}
.contact-page-main-section .social-icon {
width: 32px;
height: 32px;
font-size: 14px;
}
}
/* टैबलेट लैंडस्केप मोड के लिए */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.contact-page-main-section .contact-page-wrapper {
max-width: 900px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 30px;
}
}
/* मोबाइल लैंडस्केप मोड के लिए */
@media (max-width: 767px) and (orientation: landscape) {
.contact-page-main-section .contact-container {
padding: 15px;
}
.contact-page-main-section .contact-page-wrapper {
flex-direction: row;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 20px;
height: 100%;
overflow-y: auto;
}
.contact-page-main-section .info-card {
margin-bottom: 10px;
}
}
/* हाई-डेंसिटी (रेटिना) स्क्रीन्स के लिए */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.contact-page-main-section .contact-page-wrapper {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
border-width: 1px;
}
}
/* एनिमेशन इम्प्रूवमेंट्स */
.contact-page-main-section .submit-btn {
padding: 15px 40px;
background: linear-gradient(
45deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.contact-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(36, 36, 225, 0.3);
}
.contact-page-main-section .submit-btn:active {
transform: translateY(-1px);
}
.contact-page-main-section .btn-animation {
display: flex;
align-items: center;
justify-content: center;
}
/* सोशल आइकन्स इम्प्रूवमेंट */
.contact-page-main-section .social-links {
display: flex;
gap: 15px;
margin-top: 25px;
position: relative;
z-index: 2;
}
.contact-page-main-section .social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.contact-page-main-section .social-icon:hover {
transform: translateY(-5px) rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* एनिमेशन्स */
@keyframes slideIn {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.contact-page-main-section .info-card {
animation: slideInFromRight 0.5s forwards ease-out;
animation-delay: calc(var(--card-index) * 0.1s);
}
/* Single Service Page Css Start */
.single-service-page-main-section .single-service-page-wrapper {
}
.single-service-page-main-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section */
.single-service-page-main-section .hero-section {
min-height: 100vh;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.single-service-page-main-section .hero-section::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
left: -100px;
}
.single-service-page-main-section .hero-section .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.single-service-page-main-section .hero-content {
flex: 1;
color: white;
}
.single-service-page-main-section .hero-content h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}
.single-service-page-main-section .hero-content p {
font-size: 1.1em;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}
/* Stats Styles */
.single-service-page-main-section .stats-container {
display: flex;
gap: 30px;
margin-top: 40px;
}
.single-service-page-main-section .stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.single-service-page-main-section .stat-item:hover {
transform: translateY(-5px);
}
.single-service-page-main-section .stat-number {
font-size: 2.5em;
font-weight: 700;
color: white;
display: block;
}
.single-service-page-main-section .stat-label {
font-size: 0.9em;
color: white;
}
/* Form Styles */
.single-service-page-main-section .hero-form {
flex: 1;
max-width: 500px;
opacity: 0;
transform: translateX(50px);
animation: slideIn 0.8s 0.4s forwards;
}
.single-service-page-main-section .form-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .form-container h3 {
font-size: 1.8em;
margin-bottom: 30px;
color: #333;
}
.single-service-page-main-section .input-group {
margin-bottom: 20px;
position: relative;
}
.single-service-page-main-section .input-group input,
.single-service-page-main-section .input-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #eee;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}
.single-service-page-main-section .input-group label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.3s ease;
pointer-events: none;
}
.single-service-page-main-section .input-group input:focus,
.single-service-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .input-group input:focus ~ label,
.single-service-page-main-section .input-group textarea:focus ~ label,
.single-service-page-main-section .input-group input:valid ~ label,
.single-service-page-main-section .input-group textarea:valid ~ label {
transform: translateY(-25px);
font-size: 12px;
color: rgba(36, 36, 225, 1);
}
.single-service-page-main-section .submit-btn {
width: 100%;
padding: 15px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.single-service-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
/* Service Details Section */
.single-service-page-main-section .service-details {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
perspective: 1000px;
}
.single-service-page-main-section .services-wrapper {
position: relative;
padding: 40px 0;
}
.single-service-page-main-section .service-category {
margin-bottom: 60px;
}
.single-service-page-main-section .category-title {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
position: relative;
padding-left: 20px;
}
.single-service-page-main-section .category-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 25px;
background: linear-gradient(
to bottom,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 2px;
}
.single-service-page-main-section .service-items {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
}
.single-service-page-main-section .service-items::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.single-service-page-main-section .service-item {
min-width: 380px;
background: white;
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;
scroll-snap-align: start;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .service-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.single-service-page-main-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .service-item:hover::before {
transform: translateY(0);
}
.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: rgba(36, 36, 225, 1);
margin-bottom: 20px;
transition: all 0.3s ease;
}
.single-service-page-main-section .service-item:hover .service-icon {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
color: white;
transform: rotateY(360deg);
}
.single-service-page-main-section .service-content h4 {
font-size: 1.3em;
color: #333;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-content p {
color: #666;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-features {
list-style: none;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-features li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: #666;
font-size: 0.95em;
}
.single-service-page-main-section .service-features i {
color: rgba(36, 36, 225, 1);
font-size: 14px;
}
.single-service-page-main-section .service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(36, 36, 225, 1);
text-decoration: none;
font-weight: 500;
position: relative;
z-index: 1;
transition: gap 0.3s ease;
}
.single-service-page-main-section .service-link:hover {
gap: 12px;
}
/* Navigation Arrows */
.single-service-page-main-section .service-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.single-service-page-main-section .nav-button {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.single-service-page-main-section .nav-button:hover {
background: rgba(36, 36, 225, 1);
color: white;
}
/* Process Section */
.single-service-page-main-section .process-section {
padding: 100px 0;
background: white;
}
.single-service-page-main-section .process-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
}
.single-service-page-main-section .process-timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(
to bottom,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
}
.single-service-page-main-section .timeline-item {
position: relative;
margin-bottom: 50px;
width: 50%;
padding-right: 40px;
}
.single-service-page-main-section .timeline-item:nth-child(even) {
margin-left: auto;
padding-right: 0;
padding-left: 40px;
left: 0;
}
.single-service-page-main-section .timeline-number {
width: 50px;
height: 50px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
position: absolute;
left: 100%;
transform: translateX(-50%);
}
.single-service-page-main-section
.timeline-item:nth-child(even)
.timeline-number {
left: 0;
transform: translateX(-50%);
}
/* Why Choose Us Section */
.single-service-page-main-section .why-choose-us {
padding: 100px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}
.single-service-page-main-section .why-choose-us::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
border-radius: 50%;
top: -150px;
right: -150px;
}
.single-service-page-main-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.single-service-page-main-section .feature-card {
background: white;
padding: 35px;
border-radius: 20px;
text-align: center;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.single-service-page-main-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.single-service-page-main-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}
.single-service-page-main-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}
.single-service-page-main-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}
.single-service-page-main-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.single-service-page-main-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
animation: pulse 2s infinite;
}
.single-service-page-main-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}
.single-service-page-main-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}
.single-service-page-main-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.single-service-page-main-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.single-service-page-main-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes shine {
0% {
transform: translate(-100%, -100%) rotate(45deg);
}
100% {
transform: translate(100%, 100%) rotate(45deg);
}
}
@media (max-width: 992px) {
.single-service-page-main-section .features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.single-service-page-main-section .features-grid {
grid-template-columns: 1fr;
}
.single-service-page-main-section .title {
font-size: 2.5rem;
}
}
.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}
.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: #000;
animation: rotateBackground 15s infinite linear;
pointer-events: none;
}
@keyframes rotateBackground {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .left-section {
position: relative;
}
.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}
.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}
.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
border-radius: 2px;
}
.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
transition: height 0.3s ease;
}
.contact-wrapper .info-card:hover::before {
height: 100%;
}
.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}
.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}
.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}
.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.3);
}
.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}
.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}
.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}
.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}
.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}
.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}
.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}
.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}
.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}
.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: var(--gradient);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.contact-wrapper .submit-button::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: 0.5s;
}
.contact-wrapper .submit-button:hover::before {
left: 100%;
}
.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}
.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}
@keyframes floatAnimation {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}
.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}
.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background:  var(--gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}
.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}
.contact-wrapper .status-message.show {
transform: translateX(0);
}
@media (max-width: 1200px) {
.contact-wrapper .contact-container {
grid-template-columns: 1fr;
max-width: 800px;
}
}
@media (max-width: 768px) {
.contact-wrapper .contact-container {
padding: 20px;
}
.contact-wrapper .contact-header h2 {
font-size: 2.5em;
}
.contact-wrapper .right-section {
padding: 30px;
}
}
@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
font-size: 2em;
}
.contact-wrapper .info-content {
flex-direction: column;
text-align: center;
}
.contact-wrapper .icon-box {
margin: 0 auto;
}
}
.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
.faq-section .faq-header {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}
.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}
.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}
.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}
.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.faq-section .faq-item.active .faq-question {
border-left-color: rgba(36, 36, 225, 1);
}
.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}
.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
font-size: 1.2em;
transition: all 0.3s ease;
}
.faq-section .faq-item.active .question-icon {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
color: white;
transform: rotateY(360deg);
}
.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}
.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}
.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}
.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.03) 35%,
rgba(11, 205, 240, 0.03) 100%
);
}
.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}
.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}
@keyframes slideIn {
to {
transform: translateY(0);
opacity: 1;
}
}
.faq-section .search-box {
position: relative;
max-width: 500px;
margin: 30px auto 0;
z-index: 2;
}
.faq-section .search-box input {
width: 100%;
padding: 15px 25px;
border-radius: 30px;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 1em;
outline: none;
transition: all 0.3s ease;
}
.faq-section .search-box input:focus {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.faq-section .faq-container {
grid-template-columns: 1fr;
padding: 40px 20px;
}
.faq-section .faq-header {
padding: 40px 20px;
}
.faq-section .faq-header h1 {
font-size: 2em;
}
}
.faq-section .highlight {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.2) 35%,
rgba(11, 205, 240, 0.2) 100%
);
padding: 2px 5px;
border-radius: 4px;
}
.footer-wrapper {
background:  var(--gradient);
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}
.footer-wrapper .footer-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: moveGrid 15s linear infinite;
}
@keyframes moveGrid {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-40px, -40px);
}
}
.footer-wrapper .footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px 30px;
position: relative;
z-index: 1;
color: white;
}
.footer-wrapper .footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-wrapper .footer-section h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.footer-wrapper .footer-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: white;
transition: width 0.3s ease;
}
.footer-wrapper .footer-section:hover h3::after {
width: 100%;
}
.footer-wrapper .footer-about p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
opacity: 0.9;
}
.footer-wrapper .social-links {
display: flex;
gap: 15px;
}
.footer-wrapper .social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.footer-wrapper .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.footer-wrapper .social-links a:hover::before {
transform: translateY(0);
}
.footer-wrapper .social-links a i {
color: white;
font-size: 18px;
transition: all 0.3s ease;
z-index: 1;
}
.footer-wrapper .social-links a:hover i {
color:#00664f;
transform: scale(1.2);
}
.footer-wrapper .footer-links ul {
list-style: none;
padding: 0;
}
.footer-wrapper .footer-links li {
margin-bottom: 15px;
}
.footer-wrapper .footer-links a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
opacity: 0.9;
}
.footer-wrapper .footer-links a i {
font-size: 14px;
transition: transform 0.3s ease;
}
.footer-wrapper .footer-links a:hover {
opacity: 1;
transform: translateX(8px);
}
.footer-wrapper .footer-links a:hover i {
transform: scale(1.2);
}
.footer-wrapper .contact-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-wrapper .contact-item {
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
}
.footer-wrapper .contact-item:hover {
transform: translateX(8px);
}
.footer-wrapper .contact-item i {
width: 35px;
height: 35px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}
.footer-wrapper .contact-item:hover i {
background: white;
color: rgba(16, 16, 16);
transform: rotate(360deg);
}
.footer-wrapper .divider-area {
position: relative;
padding: 20px 0;
margin: 40px 0 20px;
}
.footer-wrapper .divider-line {
width: 100%;
height: 1px;
background: #000;
position: relative;
}
.footer-wrapper .divider-line::before,
.footer-wrapper .divider-line::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-wrapper .divider-line::before {
left: 20%;
}
.footer-wrapper .divider-line::after {
right: 20%;
}
.footer-wrapper .divider-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(36, 36, 225, 1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.footer-wrapper .divider-icon i {
color: white;
font-size: 16px;
}
.footer-wrapper .footer-bottom {
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
display: flex;
align-items: center;
gap: 20px;
}
.footer-wrapper .footer-bottom a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: all 0.3s ease;
}
.footer-wrapper .footer-bottom a:hover {
opacity: 1;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-wrapper .copyright-text {
position: relative;
padding-left: 25px;
}
.footer-wrapper .copyright-text::before {
content: "\f1f9";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
animation: spin 4s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@media (max-width: 1024px) {
.footer-wrapper .footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.footer-wrapper .footer-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-wrapper .footer-section {
text-align: center;
}
.footer-wrapper .footer-section h3::after {
left: 50%;
transform: translateX(-50%);
}
.footer-wrapper .social-links {
justify-content: center;
}
.footer-wrapper .footer-links a {
justify-content: center;
}
.footer-wrapper .contact-item {
justify-content: center;
}
.footer-wrapper .footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
justify-content: center;
width: 100%;
}
}
/* Services Page Css Start */
.service-page-services-section {
min-height: 100vh;
padding: 80px 20px;
background: white;
position: relative;
overflow: hidden;
}
.service-page-services-section .bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.service-page-services-section .bg-bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
animation: float 8s ease-in-out infinite;
}
.service-page-services-section .bg-bubble:nth-child(1) {
width: 100px;
height: 100px;
left: 10%;
top: 20%;
animation-delay: 0s;
}
.service-page-services-section .bg-bubble:nth-child(2) {
width: 150px;
height: 150px;
left: 35%;
top: 70%;
animation-delay: 1s;
}
.service-page-services-section .bg-bubble:nth-child(3) {
width: 80px;
height: 80px;
left: 50%;
top: 50%;
animation-delay: 2s;
}
.service-page-services-section .bg-bubble:nth-child(4) {
width: 120px;
height: 120px;
left: 70%;
top: 30%;
animation-delay: 3s;
}
.service-page-services-section .bg-bubble:nth-child(5) {
width: 200px;
height: 200px;
left: 85%;
top: 80%;
animation-delay: 4s;
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
.service-page-services-section .services-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #333;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
}
.service-page-services-section .services-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(201 201 201));
animation: widthGrow 1s ease forwards;
}
.service-page-services-section .services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 20px;
position: relative;
z-index: 1;
}
.service-page-services-section .service-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-decoration: none;
}
.service-page-services-section .service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.service-page-services-section .service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgb(0 0 0 / 10%), rgb(187 192 193 / 10%));
border-radius: 20px;
opacity: 0;
transition: all 0.5s ease;
}
.service-page-services-section .service-card:hover::before {
opacity: 1;
}
.service-page-services-section .service-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.5s ease;
}
.service-page-services-section .service-card:hover .service-icon {
transform: rotateY(360deg);
}
.service-page-services-section .service-icon i {
font-size: 35px;
color: white;
}
.service-page-services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}
.service-page-services-section .service-description {
font-size: 1rem;
line-height: 1.6;
color: #666;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes widthGrow {
from {
width: 0;
}
to {
width: 100px;
}
}
@media (max-width: 1024px) {
.service-page-services-section .services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.service-page-services-section .services-grid {
grid-template-columns: 1fr;
}
}
/* Contact Page Css Start */
.contact-page-main-section {
min-height: 80vh;
padding: 20px;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.contact-page-main-section .contact-page-wrapper {
width: 100%;
max-width: 1000px;
background: white;
border-radius: 30px;
display: flex;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-page-main-section .contact-page-wrapper::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
top: -100px;
left: -100px;
z-index: 0;
}
.contact-page-main-section .contact-page-wrapper::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
bottom: -75px;
right: -75px;
z-index: 0;
}
/* फॉर्म सेक्शन अपडेट्स */
.contact-page-main-section .contact-form-section {
flex: 1;
padding: 25px;
background: white;
}
.contact-page-main-section .section-title {
font-size: 2.2em;
margin-bottom: 25px;
color: #333;
position: relative;
animation: slideIn 1s ease-out;
font-weight: 600;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-color: transparent;
}
.contact-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
}
/* इनपुट स्टाइल्स इम्प्रूवमेंट */
.contact-page-main-section .input-group {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
transition: all 0.3s ease;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #eee;
border-radius: 10px;
outline: none;
background: #f8f9fa;
transition: all 0.3s ease;
color: #333;
}
.contact-page-main-section .input-group input:focus,
.contact-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
background: white;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}
.contact-page-main-section .input-group label {
position: absolute;
left: 15px;
top: 15px;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
padding: 0 5px;
background: transparent;
font-size: 14px;
}
.contact-page-main-section .input-group input:focus ~ label,
.contact-page-main-section .input-group textarea:focus ~ label,
.contact-page-main-section .input-group input:valid ~ label,
.contact-page-main-section .input-group textarea:valid ~ label {
top: -10px;
left: 10px;
font-size: 12px;
color: rgba(36, 36, 225, 1);
background: white;
}
.contact-page-main-section .input-group textarea {
min-height: 80px;
}
/* Team Section Styles */
.team-section {
padding: 80px 0;
background: #f8f9fa;
}
.team-section .section-title {
text-align: center;
margin-bottom: 50px;
}
.team-section .section-title h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
color: #2d3436;
}
.team-section .section-title p {
font-size: 18px;
color: #636e72;
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px;
margin: 0 auto;
max-width: 1400px;
}
.team-member {
background: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.team-member:hover {
transform: translateY(-10px);
}
.member-image {
position: relative;
overflow: hidden;
}
.member-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.member-image .social-links {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
padding: 15px 0;
display: flex;
justify-content: center;
gap: 15px;
transition: bottom 0.3s ease;
}
.team-member:hover .member-image .social-links {
bottom: 0;
}
.social-links a {
color: #ffffff;
font-size: 18px;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: background 0.3s ease;
}
.social-links a:hover {
background: var(--gradient);
}
.member-info {
padding: 25px;
text-align: center;
}
.member-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 5px;
color: #2d3436;
}
.member-info .position {
display: block;
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.member-description {
font-size: 15px;
color: #636e72;
line-height: 1.6;
}
/* Responsive Styles */
@media (max-width: 768px) {
.team-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.team-section .section-title h2 {
font-size: 30px;
}
.member-info h3 {
font-size: 20px;
}
}
/* इन्फो सेक्शन अपडेट्स */
.contact-page-main-section .contact-info-section {
flex: 1;
padding: 25px;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
color: white;
position: relative;
overflow: hidden;
z-index: 1;
}
.contact-page-main-section .contact-info-section::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -150px;
right: -150px;
z-index: -1;
}
.contact-page-main-section .info-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 15px;
transform: translateX(0);
opacity: 1;
position: relative;
z-index: 2;
}
.contact-page-main-section .info-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.contact-page-main-section .info-card h3 {
color: white;
font-size: 1.1em;
margin-bottom: 5px;
font-weight: 500;
}
.contact-page-main-section .info-card p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9em;
line-height: 1.4;
}
.contact-page-main-section .info-icon {
width: 45px;
height: 45px;
background: white;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 24px;
color: rgba(36, 36, 225, 1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.contact-page-main-section .info-card:hover .info-icon {
transform: rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
}
/* रेस्पोंसिव डिज़ाइन अपडेट्स */
@media (max-width: 1200px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 900px;
}
}
@media (max-width: 1024px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 800px;
}
.contact-page-main-section .section-title {
font-size: 2em;
}
}
@media (max-width: 768px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 600px;
flex-direction: column;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 25px;
width: 100%;
}
.contact-page-main-section .section-title {
font-size: 1.8em;
margin-bottom: 20px;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
font-size: 14px;
}
.contact-page-main-section .info-card {
padding: 15px;
margin-bottom: 15px;
flex-direction: row;
align-items: center;
}
.contact-page-main-section .info-icon {
width: 40px;
height: 40px;
font-size: 18px;
margin-bottom: 0;
margin-right: 15px;
}
.contact-page-main-section .social-links {
justify-content: center;
margin-top: 20px;
}
}
@media (max-width: 576px) {
.contact-page-main-section .contact-container {
padding: 15px;
min-height: auto;
}
.contact-page-main-section .contact-page-wrapper {
border-radius: 20px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 20px;
}
.contact-page-main-section .section-title {
font-size: 1.6em;
}
.contact-page-main-section .input-group label {
font-size: 13px;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
padding: 8px;
font-size: 14px;
}
.contact-page-main-section .submit-btn {
width: 100%;
padding: 12px;
font-size: 14px;
}
.contact-page-main-section .info-card {
padding: 12px;
margin-bottom: 12px;
}
.contact-page-main-section .info-card h3 {
font-size: 1em;
}
.contact-page-main-section .info-card p {
font-size: 0.85em;
}
.contact-page-main-section .social-icon {
width: 35px;
height: 35px;
font-size: 16px;
}
}
@media (max-width: 380px) {
.contact-page-main-section .contact-container {
padding: 10px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 15px;
}
.contact-page-main-section .section-title {
font-size: 1.4em;
}
.contact-page-main-section .info-icon {
width: 35px;
height: 35px;
font-size: 16px;
margin-right: 10px;
}
.contact-page-main-section .social-links {
gap: 10px;
}
.contact-page-main-section .social-icon {
width: 32px;
height: 32px;
font-size: 14px;
}
}
/* टैबलेट लैंडस्केप मोड के लिए */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.contact-page-main-section .contact-page-wrapper {
max-width: 900px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 30px;
}
}
/* मोबाइल लैंडस्केप मोड के लिए */
@media (max-width: 767px) and (orientation: landscape) {
.contact-page-main-section .contact-container {
padding: 15px;
}
.contact-page-main-section .contact-page-wrapper {
flex-direction: row;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 20px;
height: 100%;
overflow-y: auto;
}
.contact-page-main-section .info-card {
margin-bottom: 10px;
}
}
/* हाई-डेंसिटी (रेटिना) स्क्रीन्स के लिए */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.contact-page-main-section .contact-page-wrapper {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
border-width: 1px;
}
}
/* एनिमेशन इम्प्रूवमेंट्स */
.contact-page-main-section .submit-btn {
padding: 15px 40px;
background: linear-gradient(
45deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.contact-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(36, 36, 225, 0.3);
}
.contact-page-main-section .submit-btn:active {
transform: translateY(-1px);
}
.contact-page-main-section .btn-animation {
display: flex;
align-items: center;
justify-content: center;
}
/* सोशल आइकन्स इम्प्रूवमेंट */
.contact-page-main-section .social-links {
display: flex;
gap: 15px;
margin-top: 25px;
position: relative;
z-index: 2;
}
.contact-page-main-section .social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.contact-page-main-section .social-icon:hover {
transform: translateY(-5px) rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* एनिमेशन्स */
@keyframes slideIn {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.contact-page-main-section .info-card {
animation: slideInFromRight 0.5s forwards ease-out;
animation-delay: calc(var(--card-index) * 0.1s);
}
/* Single Service Page Css Start */
.single-service-page-main-section .single-service-page-wrapper {
}
.single-service-page-main-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section */
.single-service-page-main-section .hero-section {
min-height: 100vh;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.single-service-page-main-section .hero-section::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
left: -100px;
}
.single-service-page-main-section .hero-section .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.single-service-page-main-section .hero-content {
flex: 1;
color: white;
}
.single-service-page-main-section .hero-content h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}
.single-service-page-main-section .hero-content p {
font-size: 1.1em;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}
/* Stats Styles */
.single-service-page-main-section .stats-container {
display: flex;
gap: 30px;
margin-top: 40px;
}
.single-service-page-main-section .stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.single-service-page-main-section .stat-item:hover {
transform: translateY(-5px);
}
.single-service-page-main-section .stat-number {
font-size: 2.5em;
font-weight: 700;
color: white;
display: block;
}
.single-service-page-main-section .stat-label {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.9);
}
/* Form Styles */
.single-service-page-main-section .hero-form {
flex: 1;
max-width: 500px;
opacity: 0;
transform: translateX(50px);
animation: slideIn 0.8s 0.4s forwards;
}
.single-service-page-main-section .form-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .form-container h3 {
font-size: 1.8em;
margin-bottom: 30px;
color: #333;
}
.single-service-page-main-section .input-group {
margin-bottom: 20px;
position: relative;
}
.single-service-page-main-section .input-group input,
.single-service-page-main-section .input-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #eee;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}
.single-service-page-main-section .input-group label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.3s ease;
pointer-events: none;
}
.single-service-page-main-section .input-group input:focus,
.single-service-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .input-group input:focus ~ label,
.single-service-page-main-section .input-group textarea:focus ~ label,
.single-service-page-main-section .input-group input:valid ~ label,
.single-service-page-main-section .input-group textarea:valid ~ label {
transform: translateY(-25px);
font-size: 12px;
color: rgba(36, 36, 225, 1);
}
.single-service-page-main-section .submit-btn {
width: 100%;
padding: 15px;
background: var(--gradient);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.single-service-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
/* Service Details Section */
.single-service-page-main-section .service-details {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
perspective: 1000px;
}
.single-service-page-main-section .services-wrapper {
position: relative;
padding: 40px 0;
}
.single-service-page-main-section .service-category {
margin-bottom: 60px;
}
.single-service-page-main-section .category-title {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
position: relative;
padding-left: 20px;
}
.single-service-page-main-section .category-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 25px;
background: linear-gradient(
to bottom,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 2px;
}
.single-service-page-main-section .service-items {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
}
.single-service-page-main-section .service-items::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.single-service-page-main-section .service-item {
min-width: 380px;
background: white;
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;
scroll-snap-align: start;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .service-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.single-service-page-main-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .service-item:hover::before {
transform: translateY(0);
}
.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: rgba(36, 36, 225, 1);
margin-bottom: 20px;
transition: all 0.3s ease;
}
.single-service-page-main-section .service-item:hover .service-icon {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
color: white;
transform: rotateY(360deg);
}
.single-service-page-main-section .service-content h4 {
font-size: 1.3em;
color: #333;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-content p {
color: #666;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-features {
list-style: none;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-features li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: #666;
font-size: 0.95em;
}
.single-service-page-main-section .service-features i {
color: rgba(36, 36, 225, 1);
font-size: 14px;
}
.single-service-page-main-section .service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(36, 36, 225, 1);
text-decoration: none;
font-weight: 500;
position: relative;
z-index: 1;
transition: gap 0.3s ease;
}
.single-service-page-main-section .service-link:hover {
gap: 12px;
}
/* Navigation Arrows */
.single-service-page-main-section .service-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.single-service-page-main-section .nav-button {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.single-service-page-main-section .nav-button:hover {
background: rgba(36, 36, 225, 1);
color: white;
}
/* Process Section */
.single-service-page-main-section .process-section {
padding: 100px 0;
background: white;
}
.single-service-page-main-section .process-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
}
.single-service-page-main-section .process-timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(
to bottom,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
}
.single-service-page-main-section .timeline-item {
position: relative;
margin-bottom: 50px;
width: 50%;
padding-right: 40px;
}
.single-service-page-main-section .timeline-item:nth-child(even) {
margin-left: auto;
padding-right: 0;
padding-left: 40px;
left: 0;
}
.single-service-page-main-section .timeline-number {
width: 50px;
height: 50px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
position: absolute;
left: 100%;
transform: translateX(-50%);
}
.single-service-page-main-section
.timeline-item:nth-child(even)
.timeline-number {
left: 0;
transform: translateX(-50%);
}
/* Why Choose Us Section */
.single-service-page-main-section .why-choose-us {
padding: 100px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}
.single-service-page-main-section .why-choose-us::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
border-radius: 50%;
top: -150px;
right: -150px;
}
.single-service-page-main-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.single-service-page-main-section .feature-card {
background: white;
padding: 35px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .feature-card::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
top: 0;
left: 0;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.single-service-page-main-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: transparent;
}
.single-service-page-main-section .feature-card:hover::before {
transform: translateY(0);
}
.single-service-page-main-section .feature-icon {
width: 80px;
height: 80px;
background:#000;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
color: #fff;
margin: 0 auto 25px;
transition: all 0.3s ease;
}
.single-service-page-main-section .feature-card:hover .feature-icon {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
color: white;
transform: rotateY(360deg);
}
.single-service-page-main-section .feature-card h3 {
font-size: 1.4em;
margin-bottom: 15px;
color: #333;
position: relative;
z-index: 1;
}
.single-service-page-main-section .feature-card p {
color: #666;
font-size: 0.95em;
line-height: 1.6;
position: relative;
z-index: 1;
}
/* FAQ Section */
.single-service-page-main-section .faq-section {
padding: 100px 0;
background: white;
}
.single-service-page-main-section .faq-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.single-service-page-main-section .faq-item {
background: white;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
height: fit-content;
}
.single-service-page-main-section .faq-question {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.single-service-page-main-section .faq-question h3 {
font-size: 1.1em;
font-weight: 500;
flex: 1;
padding-right: 15px;
}
.single-service-page-main-section .faq-toggle {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
transition: all 0.3s ease;
flex-shrink: 0;
}
.single-service-page-main-section .faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.single-service-page-main-section .faq-item.active .faq-answer {
padding: 20px;
max-height: 500px;
}
.single-service-page-main-section .faq-item.active .faq-toggle {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}
@media (max-width: 768px) {
.single-service-page-main-section .faq-container {
grid-template-columns: 1fr;
}
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.single-service-page-main-section .hero-section .container {
flex-direction: column;
text-align: center;
}
.single-service-page-main-section .stats-container {
justify-content: center;
}
.single-service-page-main-section .hero-form {
max-width: 100%;
}
}
@media (max-width: 768px) {
.single-service-page-main-section .hero-content h1 {
font-size: 2.5em;
}
.single-service-page-main-section .process-timeline::before {
left: 0;
}
.single-service-page-main-section .timeline-item {
width: 100%;
padding-left: 50px;
padding-right: 0;
}
.single-service-page-main-section .timeline-item:nth-child(even) {
padding-left: 50px;
}
.single-service-page-main-section .timeline-number {
left: 0;
}
.single-service-page-main-section .features-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.single-service-page-main-section .feature-card {
padding: 25px;
}
.single-service-page-main-section .feature-icon {
width: 60px;
height: 60px;
font-size: 25px;
margin-bottom: 20px;
}
.single-service-page-main-section .feature-card h3 {
font-size: 1.2em;
}
.single-service-page-main-section .service-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.single-service-page-main-section .service-card {
padding: 25px;
}
.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.single-service-page-main-section .service-card h3 {
font-size: 1.2em;
}
.single-service-page-main-section .service-item {
min-width: 300px;
padding: 25px;
}
.single-service-page-main-section .category-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
.single-service-page-main-section .stats-container {
flex-direction: column;
}
.single-service-page-main-section .form-container {
padding: 20px;
}
.single-service-page-main-section .service-item {
min-width: 260px;
padding: 20px;
}
.single-service-page-main-section .service-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
}
/* About Service Section */
.single-service-page-main-section .about-service {
padding: 100px 0;
background: white;
overflow: hidden;
}
.single-service-page-main-section .about-service-content {
display: flex;
align-items: center;
gap: 50px;
}
.single-service-page-main-section .about-service-text {
flex: 1;
}
.single-service-page-main-section .service-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
color: rgba(36, 36, 225, 1);
border-radius: 30px;
font-size: 0.9em;
font-weight: 500;
margin-bottom: 20px;
animation: fadeIn 0.5s ease-out;
}
.single-service-page-main-section .about-title {
font-size: 2.8em;
line-height: 1.2;
margin-bottom: 20px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInUp 0.5s ease-out;
}
.single-service-page-main-section .about-description {
font-size: 1.1em;
color: #666;
margin-bottom: 40px;
line-height: 1.8;
}
.single-service-page-main-section .service-highlights {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 40px;
}
.single-service-page-main-section .highlight-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.single-service-page-main-section .highlight-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .highlight-icon {
width: 50px;
height: 50px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.single-service-page-main-section .highlight-text h3 {
font-size: 1.2em;
margin-bottom: 5px;
color: #333;
}
.single-service-page-main-section .highlight-text p {
color: #666;
font-size: 0.95em;
}
.single-service-page-main-section .service-cta {
display: flex;
align-items: center;
gap: 40px;
margin-top: 40px;
}
.single-service-page-main-section .primary-btn {
padding: 15px 35px;
background: var(--gradient);
border-radius: 30px;
color: white;
}
/* Topbar Styles */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.services-section {
min-height: 100vh;
background: #000;
padding: 100px 20px;
position: relative;
overflow: hidden;
}
.services-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.services-section .container {
max-width: 1200px;
margin: 0 auto;
}
.services-section .section-title {
text-align: center;
color: white;
margin-bottom: 60px;
position: relative;
}
.services-section .title-main {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}
.services-section .title-sub {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}
.services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 30px;
padding: 20px;
}
.services-section .service-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 0.8s forwards;
}
.services-section .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}
.services-section .service-card::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: 0.5s;
}
.services-section .service-card:hover::before {
left: 100%;
}
.services-section .icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: transform 0.3s ease;
}
.services-section .service-card:hover .icon-wrapper {
transform: scale(1.1);
}
.services-section .icon-wrapper i {
font-size: 35px;
color: white;
position: relative;
z-index: 1;
}
.services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}
.services-section .service-description {
font-size: 0.85rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 25px;
text-align: justify;
}
.services-section .learn-more {
display: inline-block;
padding: 10px 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 25px;
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.services-section .learn-more:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.services-section .view-all-wrapper {
margin-top: 40px;
text-align: center;
}
.services-section .view-all-wrapper .btn-modern {
display: inline-block;
padding: 15px 35px;
background:#FFFFFF;
border-radius: 30px;
color: #000000;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.services-section .view-all-wrapper .btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
background: linear-gradient(45deg, rgb(255 255 255), rgb(255 255 255));
}
.services-section .view-all-wrapper .btn-modern:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animation delays for cards */
.services-section .service-card:nth-child(1) {
animation-delay: 0.4s;
}
.services-section .service-card:nth-child(2) {
animation-delay: 0.6s;
}
.services-section .service-card:nth-child(3) {
animation-delay: 0.8s;
}
.services-section .service-card:nth-child(4) {
animation-delay: 1s;
}
.services-section .service-card:nth-child(5) {
animation-delay: 1.2s;
}
.services-section .service-card:nth-child(6) {
animation-delay: 1.4s;
}
/* Responsive Design */
@media (max-width: 768px) {
.services-section .services-section {
padding: 60px 15px;
}
.services-section .title-main {
font-size: 2rem;
}
.services-section .title-sub {
font-size: 1rem;
padding: 0 20px;
}
.services-section .services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.services-section .service-card {
padding: 30px 20px;
}
.services-section .icon-wrapper {
width: 70px;
height: 70px;
}
.services-section .icon-wrapper i {
font-size: 30px;
}
}
.home-stats-section {
padding: 100px 0;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}
.home-stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 50% 50%,
rgba(36, 36, 225, 0.03) 0%,
transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}
.home-stats-section .container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 80px;
position: relative;
z-index: 1;
}
.home-stats-section .text-content {
flex: 1;
position: relative;
}
.home-stats-section .glowing-line {
width: 3px;
height: 100px;
background: #000;
position: absolute;
left: -20px;
top: 0;
animation: glow 2s ease-in-out infinite;
}
.home-stats-section .headline {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: slideUpFade 1s forwards;
}
.home-stats-section .headline span {
display: inline;
background:var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-stats-section .description {
font-size: 1.2rem;
color: #555;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0;
animation: slideUpFade 1s 0.3s forwards;
}
.home-stats-section .stats-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
perspective: 1000px;
}
.home-stats-section .stat-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
transform: translateZ(0);
transition: transform 0.5s;
position: relative;
overflow: hidden;
opacity: 0;
animation: cardAppear 0.5s forwards;
}
.home-stats-section .stat-card:nth-child(1) {
animation-delay: 0.4s;
}
.home-stats-section .stat-card:nth-child(2) {
animation-delay: 0.6s;
}
.home-stats-section .stat-card:nth-child(3) {
animation-delay: 0.8s;
}
.home-stats-section .stat-card:nth-child(4) {
animation-delay: 1s;
}
.home-stats-section .stat-card:hover {
transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
}
.home-stats-section .stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
45deg,
transparent,
rgba(36, 36, 225, 0.1),
transparent
);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}
.home-stats-section .stat-number {
font-size: 3.5rem;
font-weight: 800;
background:  var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.home-stats-section .stat-number::after {
content: "+";
font-size: 2rem;
position: absolute;
top: 0;
right: -20px;
background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-stats-section .stat-label {
font-size: 1.2rem;
color: #555;
font-weight: 600;
position: relative;
}
.home-stats-section .floating-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
.home-stats-section .particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
animation: float 20s linear infinite;
}
.home-stats-section .particle:nth-child(1) {
left: 10%;
top: 20%;
animation-delay: 0s;
}
.home-stats-section .particle:nth-child(2) {
left: 30%;
top: 50%;
animation-delay: 2s;
}
.home-stats-section .particle:nth-child(3) {
left: 50%;
top: 30%;
animation-delay: 4s;
}
.home-stats-section .particle:nth-child(4) {
left: 70%;
top: 60%;
animation-delay: 6s;
}
.home-stats-section .particle:nth-child(5) {
left: 90%;
top: 40%;
animation-delay: 8s;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes glow {
0%,
100% {
opacity: 0.5;
box-shadow: 0 0 10px rgba(36, 36, 225, 0.5);
}
50% {
opacity: 1;
box-shadow: 0 0 20px rgba(36, 36, 225, 0.8);
}
}
@keyframes slideUpFade {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardAppear {
from {
opacity: 0;
transform: translateY(30px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
.home-stats-section .typing-effect {
overflow: hidden;
border-right: 3px solid rgba(36, 36, 225, 1);
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: rgba(36, 36, 225, 1);
}
}
@media (max-width: 1024px) {
.home-stats-section .container {
flex-direction: column;
text-align: center;
}
.home-stats-section.glowing-line {
display: none;
}
.home-stats-section .headline {
font-size: 3rem;
}
.home-stats-section .stats-grid {
grid-template-columns: 1fr;
width: 100%;
}
}
.home-why-choose-section {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1) 35%,
rgba(11, 205, 240, 1) 100%
);
padding: 100px 20px;
min-height: 100vh;
display: flex;
align-items: center;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}
.home-why-choose-section .glass-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
backdrop-filter: blur(10px);
}
.home-why-choose-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.home-why-choose-section .section-header {
text-align: center;
margin-bottom: 80px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards;
}
.home-why-choose-section .title {
font-size: 3.5rem;
color: white;
font-weight: 800;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.home-why-choose-section .title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: white;
border-radius: 2px;
}
.home-why-choose-section .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}
.home-why-choose-section .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.home-why-choose-section .feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
text-align: center;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.home-why-choose-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.home-why-choose-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}
.home-why-choose-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}
.home-why-choose-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}
.home-why-choose-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home-why-choose-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
animation: pulse 2s infinite;
}
.home-why-choose-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}
.home-why-choose-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}
.home-why-choose-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.home-why-choose-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.home-why-choose-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes shine {
0% {
transform: translate(-100%, -100%) rotate(45deg);
}
100% {
transform: translate(100%, 100%) rotate(45deg);
}
}
@media (max-width: 992px) {
.home-why-choose-section .features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.home-why-choose-section .features-grid {
grid-template-columns: 1fr;
}
.home-why-choose-section .title {
font-size: 2.5rem;
}
}
.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}
.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: #36363652;
animation: rotateBackground 20s infinite linear;
pointer-events: none;
}
@keyframes rotateBackground {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .left-section {
position: relative;
}
.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}
.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background:linear-gradient(90deg, rgb(0 0 0) 35%, rgb(0 0 0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}
.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(90deg, rgb(0 0 0) 35%, rgb(172 172 172) 100%);
border-radius: 2px;
}
.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(90deg, rgb(0 0 0) 35%, rgb(0 0 0) 100%);
transition: height 0.3s ease;
}
.contact-wrapper .info-card:hover::before {
height: 100%;
}
.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}
.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}
.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background:var(--gradient);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}
.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgb(0 0 0);
box-shadow: 0 0 20px rgb(35 35 36 / 30%);
}
.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}
.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}
.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}
.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}
.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}
.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}
.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}
.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}
.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}
.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background:  var(--gradient);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.contact-wrapper .submit-button::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: 0.5s;
}
.contact-wrapper .submit-button:hover::before {
left: 100%;
}
.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}
.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1) 35%,
rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}
@keyframes floatAnimation {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}
.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}
.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background: var(--gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}
.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
@keyframes slideInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}
.contact-wrapper .status-message.show {
transform: translateX(0);
}
@media (max-width: 1200px) {
.contact-wrapper .contact-container {
grid-template-columns: 1fr;
max-width: 800px;
}
}
@media (max-width: 768px) {
.contact-wrapper .contact-container {
padding: 20px;
}
.contact-wrapper .contact-header h2 {
font-size: 2.5em;
}
.contact-wrapper .right-section {
padding: 30px;
}
}
@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
font-size: 2em;
}
.contact-wrapper .info-content {
flex-direction: column;
text-align: center;
}
.contact-wrapper .icon-box {
margin: 0 auto;
}
}
.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
.faq-section .faq-header {
background:  var(--gradient);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}
.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}
.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}
.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}
.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.faq-section .faq-item.active .faq-question {
border-left-color: rgb(0 0 0);
}
.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}
.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(90deg, rgb(0 0 0 / 10%) 35%, rgb(0 0 0 / 10%) 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgb(0 0 0);
font-size: 1.2em;
transition: all 0.3s ease;
}
.faq-section .faq-item.active .question-icon {
background:#000;
color: white;
transform: rotateY(360deg);
}
.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}
.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}
.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: #000;
color: white;
}
.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background:rgb(0 0 0)absolute;
}
.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}
.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}
@keyframes slideIn {
to {
transform: translateY(0);
opacity: 1;
}
}
.faq-section .search-box {
position: relative;
max-width: 500px;
margin: 30px auto 0;
z-index: 2;
}
.faq-section .search-box input {
width: 100%;
padding: 15px 25px;
border-radius: 30px;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 1em;
outline: none;
transition: all 0.3s ease;
}
.faq-section .search-box input:focus {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.faq-section .faq-container {
grid-template-columns: 1fr;
padding: 40px 20px;
}
.faq-section .faq-header {
padding: 40px 20px;
}
.faq-section .faq-header h1 {
font-size: 2em;
}
}
.faq-section .highlight {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.2) 35%,
rgba(11, 205, 240, 0.2) 100%
);
padding: 2px 5px;
border-radius: 4px;
}
.footer-wrapper {
background: #000000;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}
.footer-wrapper .footer-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
rgba(255, 255, 255, 0.1) 1px,
transparent 1px
),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: moveGrid 15s linear infinite;
}
@keyframes moveGrid {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-40px, -40px);
}
}
.footer-wrapper .footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px 30px;
position: relative;
z-index: 1;
color: white;
}
.footer-wrapper .footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-wrapper .footer-section h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
display: inline-block;
}
.footer-wrapper .footer-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: white;
transition: width 0.3s ease;
}
.footer-wrapper .footer-section:hover h3::after {
width: 100%;
}
.footer-wrapper .footer-about p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
opacity: 0.9;
}
.footer-wrapper .social-links {
display: flex;
gap: 15px;
}
.footer-wrapper .social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.footer-wrapper .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.footer-wrapper .social-links a:hover::before {
transform: translateY(0);
}
.footer-wrapper .social-links a i {
color: white;
font-size: 18px;
transition: all 0.3s ease;
z-index: 1;
}
.footer-wrapper .social-links a:hover i {
color: #00664f;
transform: scale(1.2);
}
.footer-wrapper .footer-links ul {
list-style: none;
padding: 0;
}
.footer-wrapper .footer-links li {
margin-bottom: 15px;
}
.footer-wrapper .footer-links a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
opacity: 0.9;
}
.footer-wrapper .footer-links a i {
font-size: 14px;
transition: transform 0.3s ease;
}
.footer-wrapper .footer-links a:hover {
opacity: 1;
transform: translateX(8px);
}
.footer-wrapper .footer-links a:hover i {
transform: scale(1.2);
}
.footer-wrapper .contact-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer-wrapper .contact-item {
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
}
.footer-wrapper .contact-item:hover {
transform: translateX(8px);
}
.footer-wrapper .contact-item i {
width: 35px;
height: 35px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.footer-wrapper .contact-item:hover i {
background: white;
color: rgb(16 16 16);
transform: rotate(360deg);
}
.footer-wrapper .divider-area {
position: relative;
padding: 20px 0;
margin: 40px 0 20px;
}
.footer-wrapper .divider-line {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.3),
transparent
);
position: relative;
}
.footer-wrapper .divider-line::before,
.footer-wrapper .divider-line::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-wrapper .divider-line::before {
left: 20%;
}
.footer-wrapper .divider-line::after {
right: 20%;
}
.footer-wrapper .divider-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--gradient);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.footer-wrapper .divider-icon i {
color: white;
font-size: 16px;
}
.footer-wrapper .footer-bottom {
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
display: flex;
align-items: center;
gap: 20px;
}
.footer-wrapper .footer-bottom a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: all 0.3s ease;
}
.footer-wrapper .footer-bottom a:hover {
opacity: 1;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.footer-wrapper .copyright-text {
position: relative;
padding-left: 25px;
}
.footer-wrapper .copyright-text::before {
content: "\f1f9";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
animation: spin 4s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@media (max-width: 1024px) {
.footer-wrapper .footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.footer-wrapper .footer-content {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-wrapper .footer-section {
text-align: center;
}
.footer-wrapper .footer-section h3::after {
left: 50%;
transform: translateX(-50%);
}
.footer-wrapper .social-links {
justify-content: center;
}
.footer-wrapper .footer-links a {
justify-content: center;
}
.footer-wrapper .contact-item {
justify-content: center;
text-align-last: left;
text-align: left;
}
.footer-wrapper .footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
justify-content: center;
width: 100%;
}
}
/* Services Page Css Start */
.service-page-services-section {
min-height: 100vh;
padding: 80px 20px;
background: white;
position: relative;
overflow: hidden;
}
.service-page-services-section .bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.service-page-services-section .bg-bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
animation: float 8s ease-in-out infinite;
}
.service-page-services-section .bg-bubble:nth-child(1) {
width: 100px;
height: 100px;
left: 10%;
top: 20%;
animation-delay: 0s;
}
.service-page-services-section .bg-bubble:nth-child(2) {
width: 150px;
height: 150px;
left: 35%;
top: 70%;
animation-delay: 1s;
}
.service-page-services-section .bg-bubble:nth-child(3) {
width: 80px;
height: 80px;
left: 50%;
top: 50%;
animation-delay: 2s;
}
.service-page-services-section .bg-bubble:nth-child(4) {
width: 120px;
height: 120px;
left: 70%;
top: 30%;
animation-delay: 3s;
}
.service-page-services-section .bg-bubble:nth-child(5) {
width: 200px;
height: 200px;
left: 85%;
top: 80%;
animation-delay: 4s;
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
.service-page-services-section .services-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #333;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
}
.service-page-services-section .services-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(201 201 201));
animation: widthGrow 1s ease forwards;
}
.service-page-services-section .services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 20px;
position: relative;
z-index: 1;
}
.service-page-services-section .service-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-decoration: none;
}
.service-page-services-section .service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.service-page-services-section .service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgb(0 0 0 / 10%), rgb(187 192 193 / 10%));
border-radius: 20px;
opacity: 0;
transition: all 0.5s ease;
}
.service-page-services-section .service-card:hover::before {
opacity: 1;
}
.service-page-services-section .service-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.5s ease;
}
.service-page-services-section .service-card:hover .service-icon {
transform: rotateY(360deg);
}
.service-page-services-section .service-icon i {
font-size: 35px;
color: white;
}
.service-page-services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}
.service-page-services-section .service-description {
font-size: 1rem;
line-height: 1.6;
color: #666;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes widthGrow {
from {
width: 0;
}
to {
width: 100px;
}
}
@media (max-width: 1024px) {
.service-page-services-section .services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.service-page-services-section .services-grid {
grid-template-columns: 1fr;
}
}
/* Contact Page Css Start */
.contact-page-main-section {
min-height: 80vh;
padding: 20px;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.contact-page-main-section .contact-page-wrapper {
width: 100%;
max-width: 1000px;
background: white;
border-radius: 30px;
display: flex;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-page-main-section .contact-page-wrapper::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
top: -100px;
left: -100px;
z-index: 0;
}
.contact-page-main-section .contact-page-wrapper::after {
content: "";
position: absolute;
width: 150px;
height: 150px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
bottom: -75px;
right: -75px;
z-index: 0;
}
/* फॉर्म सेक्शन अपडेट्स */
.contact-page-main-section .contact-form-section {
flex: 1;
padding: 25px;
background: white;
}
.contact-page-main-section .section-title {
font-size: 2.2em;
margin-bottom: 25px;
color: #333;
position: relative;
animation: slideIn 1s ease-out;
font-weight: 600;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-color: transparent;
}
.contact-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(128 129 130));
}
/* इनपुट स्टाइल्स इम्प्रूवमेंट */
.contact-page-main-section .input-group {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
transition: all 0.3s ease;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #eee;
border-radius: 10px;
outline: none;
background: #f8f9fa;
transition: all 0.3s ease;
color: #333;
}
.contact-page-main-section .input-group input:focus,
.contact-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
background: white;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}
.contact-page-main-section .input-group label {
position: absolute;
left: 15px;
top: 15px;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
padding: 0 5px;
background: transparent;
font-size: 14px;
}
.contact-page-main-section .input-group input:focus ~ label,
.contact-page-main-section .input-group textarea:focus ~ label,
.contact-page-main-section .input-group input:valid ~ label,
.contact-page-main-section .input-group textarea:valid ~ label {
top: -10px;
left: 10px;
font-size: 12px;
color: rgba(36, 36, 225, 1);
background: white;
}
.contact-page-main-section .input-group textarea {
min-height: 80px;
}
/* इन्फो सेक्शन अपडेट्स */
.contact-page-main-section .contact-info-section {
flex: 1;
padding: 25px;
background:  linear-gradient(135deg, #00664f, #00D289);
color: white;
position: relative;
overflow: hidden;
z-index: 1;
}
.contact-page-main-section .contact-info-section::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -150px;
right: -150px;
z-index: -1;
}
.contact-page-main-section .info-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 15px;
transform: translateX(0);
opacity: 1;
position: relative;
z-index: 2;
}
.contact-page-main-section .info-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.contact-page-main-section .info-card h3 {
color: white;
font-size: 1.1em;
margin-bottom: 5px;
font-weight: 500;
}
.contact-page-main-section .info-card p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9em;
line-height: 1.4;
}
.contact-page-main-section .info-icon {
width: 45px;
height: 45px;
background: white;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 24px;
color: #00664F;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.contact-page-main-section .info-card:hover .info-icon {
transform: rotate(360deg);
background: #00664F;
color: white;
}
/* रेस्पोंसिव डिज़ाइन अपडेट्स */
@media (max-width: 1200px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 900px;
}
}
@media (max-width: 1024px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 800px;
}
.contact-page-main-section .section-title {
font-size: 2em;
}
}
@media (max-width: 768px) {
.contact-page-main-section .contact-page-wrapper {
max-width: 600px;
flex-direction: column;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 25px;
width: 100%;
}
.contact-page-main-section .section-title {
font-size: 1.8em;
margin-bottom: 20px;
}
.contact-page-main-section .input-group {
margin-bottom: 15px;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
font-size: 14px;
}
.contact-page-main-section .info-card {
padding: 15px;
margin-bottom: 15px;
flex-direction: row;
align-items: center;
}
.contact-page-main-section .info-icon {
width: 40px;
height: 40px;
font-size: 18px;
margin-bottom: 0;
margin-right: 15px;
}
.contact-page-main-section .social-links {
justify-content: center;
margin-top: 20px;
}
}
@media (max-width: 576px) {
.contact-page-main-section .contact-container {
padding: 15px;
min-height: auto;
}
.contact-page-main-section .contact-page-wrapper {
border-radius: 20px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 20px;
}
.contact-page-main-section .section-title {
font-size: 1.6em;
}
.contact-page-main-section .input-group label {
font-size: 13px;
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
padding: 8px;
font-size: 14px;
}
.contact-page-main-section .submit-btn {
width: 100%;
padding: 12px;
font-size: 14px;
}
.contact-page-main-section .info-card {
padding: 12px;
margin-bottom: 12px;
}
.contact-page-main-section .info-card h3 {
font-size: 1em;
}
.contact-page-main-section .info-card p {
font-size: 0.85em;
}
.contact-page-main-section .social-icon {
width: 35px;
height: 35px;
font-size: 16px;
}
}
@media (max-width: 380px) {
.contact-page-main-section .contact-container {
padding: 10px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 15px;
}
.contact-page-main-section .section-title {
font-size: 1.4em;
}
.contact-page-main-section .info-icon {
width: 35px;
height: 35px;
font-size: 16px;
margin-right: 10px;
}
.contact-page-main-section .social-links {
gap: 10px;
}
.contact-page-main-section .social-icon {
width: 32px;
height: 32px;
font-size: 14px;
}
}
/* टैबलेट लैंडस्केप मोड के लिए */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.contact-page-main-section .contact-page-wrapper {
max-width: 900px;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 30px;
}
}
/* मोबाइल लैंडस्केप मोड के लिए */
@media (max-width: 767px) and (orientation: landscape) {
.contact-page-main-section .contact-container {
padding: 15px;
}
.contact-page-main-section .contact-page-wrapper {
flex-direction: row;
}
.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
padding: 20px;
height: 100%;
overflow-y: auto;
}
.contact-page-main-section .info-card {
margin-bottom: 10px;
}
}
/* हाई-डेंसिटी (रेटिना) स्क्रीन्स के लिए */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.contact-page-main-section .contact-page-wrapper {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
border-width: 1px;
}
}
/* एनिमेशन इम्प्रूवमेंट्स */
.contact-page-main-section .submit-btn {
padding: 15px 40px;
background: linear-gradient(
45deg,
#00664f, #00D289
);
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.contact-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(36, 36, 225, 0.3);
}
.contact-page-main-section .submit-btn:active {
transform: translateY(-1px);
}
.contact-page-main-section .btn-animation {
display: flex;
align-items: center;
justify-content: center;
}
/* सोशल आइकन्स इम्प्रूवमेंट */
.contact-page-main-section .social-links {
display: flex;
gap: 15px;
margin-top: 25px;
position: relative;
z-index: 2;
}
.contact-page-main-section .social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color:#00664f;
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.contact-page-main-section .social-icon:hover {
transform: translateY(-5px) rotate(360deg);
background: #00664f;
color: white;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* एनिमेशन्स */
@keyframes slideIn {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInFromRight {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.contact-page-main-section .info-card {
animation: slideInFromRight 0.5s forwards ease-out;
animation-delay: calc(var(--card-index) * 0.1s);
}
/* Single Service Page Css Start */
.single-service-page-main-section .single-service-page-wrapper {
}
.single-service-page-main-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section */
.single-service-page-main-section .hero-section {
min-height: 100vh;
background: #000000;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.single-service-page-main-section .hero-section::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
left: -100px;
}
.single-service-page-main-section .hero-section .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}
.single-service-page-main-section .hero-content {
flex: 1;
color: white;
flex-direction:column;
}
.single-service-page-main-section .hero-content h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}
.single-service-page-main-section .hero-content p {
font-size: 1.1em;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}
/* Stats Styles */
.single-service-page-main-section .stats-container {
display: flex;
gap: 30px;
margin-top: 40px;
}
.single-service-page-main-section .stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.single-service-page-main-section .stat-item:hover {
transform: translateY(-5px);
}
.single-service-page-main-section .stat-number {
font-size: 2.5em;
font-weight: 700;
color: white;
display: block;
}
.single-service-page-main-section .stat-label {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.9);
}
/* Form Styles */
.single-service-page-main-section .hero-form {
flex: 1;
max-width: 500px;
opacity: 0;
transform: translateX(50px);
animation: slideIn 0.8s 0.4s forwards;
}
.single-service-page-main-section .form-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .form-container h3 {
font-size: 1.8em;
margin-bottom: 30px;
color: #333;
}
.single-service-page-main-section .input-group {
margin-bottom: 20px;
position: relative;
}
.single-service-page-main-section .input-group input,
.single-service-page-main-section .input-group textarea {
width: 100%;
padding: 12px;
border: 2px solid #eee;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}
.single-service-page-main-section .input-group label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.3s ease;
pointer-events: none;
}
.single-service-page-main-section .input-group input:focus,
.single-service-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .input-group input:focus ~ label,
.single-service-page-main-section .input-group textarea:focus ~ label,
.single-service-page-main-section .input-group input:valid ~ label,
.single-service-page-main-section .input-group textarea:valid ~ label {
transform: translateY(-25px);
font-size: 12px;
color: #00664f);
}
.single-service-page-main-section .submit-btn {
width: 100%;
padding: 15px;
background: var(--gradient);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.single-service-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
/* Service Details Section */
.single-service-page-main-section .service-details {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
perspective: 1000px;
}
.single-service-page-main-section .services-wrapper {
position: relative;
padding: 40px 0;
}
.single-service-page-main-section .service-category {
margin-bottom: 60px;
}
.single-service-page-main-section .category-title {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
position: relative;
padding-left: 20px;
}
.single-service-page-main-section .category-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 25px;
background: linear-gradient(
to bottom,
#00664f, #00D289
);
border-radius: 2px;
}
.single-service-page-main-section .service-items {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
}
.single-service-page-main-section .service-items::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.single-service-page-main-section .service-item {
min-width: 380px;
background: white;
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;
scroll-snap-align: start;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .service-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.single-service-page-main-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .service-item:hover::before {
transform: translateY(0);
}
.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color:#00664f;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.single-service-page-main-section .service-item:hover .service-icon {
background: linear-gradient(
135deg,
#00664f,
#00D289
);
color: white;
transform: rotateY(360deg);
}
.single-service-page-main-section .service-content h4 {
font-size: 1.3em;
color: #333;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-content p {
color: #666;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-features {
list-style: none;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.single-service-page-main-section .service-features li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: #666;
font-size: 0.95em;
}
.single-service-page-main-section .service-features i {
color:#00664f;
font-size: 14px;
}
.single-service-page-main-section .service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #00664f;
text-decoration: none;
font-weight: 500;
position: relative;
z-index: 1;
transition: gap 0.3s ease;
}
.single-service-page-main-section .service-link:hover {
gap: 12px;
}
/* Navigation Arrows */
.single-service-page-main-section .service-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.single-service-page-main-section .nav-button {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.single-service-page-main-section .nav-button:hover {
background: #00664f;
color: white;
}
/* Process Section */
.single-service-page-main-section .process-section {
padding: 100px 0;
background: white;
}
.single-service-page-main-section .process-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
}
.single-service-page-main-section .process-timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(
to bottom,
#00664f,
#00D289
);
}
.single-service-page-main-section .timeline-item {
position: relative;
margin-bottom: 50px;
width: 50%;
padding-right: 40px;
}
.single-service-page-main-section .timeline-item:nth-child(even) {
margin-left: auto;
padding-right: 0;
padding-left: 40px;
left: 0;
}
.single-service-page-main-section .timeline-number {
width: 50px;
height: 50px;
background: linear-gradient(
90deg,
#00664f, #00D289
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
position: absolute;
left: 100%;
transform: translateX(-50%);
}
.single-service-page-main-section
.timeline-item:nth-child(even)
.timeline-number {
left: 0;
transform: translateX(-50%);
}
/* Why Choose Us Section */
.single-service-page-main-section .why-choose-us {
padding: 100px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}
.single-service-page-main-section .why-choose-us::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
border-radius: 50%;
top: -150px;
right: -150px;
}
.single-service-page-main-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.single-service-page-main-section .feature-card {
background: white;
padding: 35px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}
.single-service-page-main-section .feature-card::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.05),
rgba(11, 205, 240, 0.05)
);
top: 0;
left: 0;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.single-service-page-main-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: transparent;
}
.single-service-page-main-section .feature-card:hover::before {
transform: translateY(0);
}
.single-service-page-main-section .feature-icon {
width: 80px;
height: 80px;
background: #000;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
color: #fff;
margin: 0 auto 25px;
transition: all 0.3s ease;
}
.single-service-page-main-section .feature-card:hover .feature-icon {
background: #000;
color: white;
transform: rotateY(360deg);
}
.single-service-page-main-section .feature-card h3 {
font-size: 1.3em;
margin-bottom: 15px;
color: #333;
position: relative;
z-index: 1;
}
.single-service-page-main-section .feature-card p {
color: #666;
font-size: 0.95em;
line-height: 1.6;
position: relative;
z-index: 1;
}
/* FAQ Section */
.single-service-page-main-section .faq-section {
padding: 100px 0;
background: white;
}
.single-service-page-main-section .faq-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.single-service-page-main-section .faq-item {
background: white;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
height: fit-content;
}
.single-service-page-main-section .faq-question {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
.single-service-page-main-section .faq-question h3 {
font-size: 1.1em;
font-weight: 500;
flex: 1;
padding-right: 15px;
}
.single-service-page-main-section .faq-toggle {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #00664f;
transition: all 0.3s ease;
flex-shrink: 0;
}
.single-service-page-main-section .faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.single-service-page-main-section .faq-item.active .faq-answer {
padding: 20px;
max-height: 500px;
}
.single-service-page-main-section .faq-item.active .faq-toggle {
transform: rotate(45deg);
background:#00664f;
color: white;
}
@media (max-width: 768px) {
.single-service-page-main-section .hero-section .container {
flex-direction: column;
text-align: center;
}
.single-service-page-main-section .stats-container {
justify-content: center;
}
.single-service-page-main-section .hero-form {
max-width: 100%;
}
}
@media (max-width: 768px) {
.single-service-page-main-section .hero-content h1 {
font-size: 2.5em;
}
.single-service-page-main-section .process-timeline::before {
left: 0;
}
.single-service-page-main-section .timeline-item {
width: 100%;
padding-left: 50px;
padding-right: 0;
}
.single-service-page-main-section .timeline-item:nth-child(even) {
padding-left: 50px;
}
.single-service-page-main-section .timeline-number {
left: 0;
}
.single-service-page-main-section .features-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.single-service-page-main-section .feature-card {
padding: 25px;
}
.single-service-page-main-section .feature-icon {
width: 60px;
height: 60px;
font-size: 25px;
margin-bottom: 20px;
}
.single-service-page-main-section .feature-card h3 {
font-size: 1.2em;
}
.single-service-page-main-section .service-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.single-service-page-main-section .service-card {
padding: 25px;
}
.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.single-service-page-main-section .service-card h3 {
font-size: 1.2em;
}
.single-service-page-main-section .service-item {
min-width: 300px;
padding: 25px;
}
.single-service-page-main-section .category-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
.single-service-page-main-section .stats-container {
flex-direction: column;
}
.single-service-page-main-section .form-container {
padding: 20px;
}
.single-service-page-main-section .service-item {
min-width: 260px;
padding: 20px;
}
.single-service-page-main-section .service-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
}
/* About Service Section */
.single-service-page-main-section .about-service {
padding: 100px 0;
background: white;
overflow: hidden;
}
.single-service-page-main-section .about-service-content {
display: flex;
align-items: center;
gap: 50px;
}
.single-service-page-main-section .about-service-text {
flex: 1;
}
.single-service-page-main-section .service-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(90deg, rgb(3 3 3), rgb(0 2 3));
color: #ffffff;
border-radius: 30px;
font-size: 0.9em;
font-weight: 500;
margin-bottom: 20px;
animation: fadeIn 0.5s ease-out;
}
.single-service-page-main-section .about-title {
font-size: 2.8em;
line-height: 1.2;
margin-bottom: 20px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInUp 0.5s ease-out;
}
.single-service-page-main-section .about-description {
font-size: 1.1em;
color: #666;
margin-bottom: 40px;
line-height: 1.8;
}
.single-service-page-main-section .service-highlights {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 40px;
}
.single-service-page-main-section .highlight-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.single-service-page-main-section .highlight-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .highlight-icon {
min-width: 50px;
height: 50px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(1 1 1));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.single-service-page-main-section .highlight-text h3 {
font-size: 1.2em;
margin-bottom: 5px;
color: #333;
}
.single-service-page-main-section .highlight-text p {
color: #666;
font-size: 0.95em;
}
.single-service-page-main-section .service-cta {
display: flex;
align-items: center;
gap: 40px;
margin-top: 40px;
}
.single-service-page-main-section .primary-btn {
padding: 15px 35px;
background:  var(--gradient);
border-radius: 30px;
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
transition: all 0.3s ease;
}
.single-service-page-main-section .primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}
.single-service-page-main-section .service-stats {
display: flex;
gap: 30px;
}
.single-service-page-main-section .stat {
text-align: center;
}
.single-service-page-main-section .stat-value {
display: block;
font-size: 2em;
font-weight: 700;
color:#00664f;
margin-bottom: 5px;
}
.single-service-page-main-section .stat-label {
color: white;
font-size: 0.9em;
}
.single-service-page-main-section .about-service-image {
flex: 1;
position: relative;
}
.single-service-page-main-section .image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .image-wrapper img {
width: 100%;
height: auto;
display: block;
transition: all 0.3s ease;
}
.single-service-page-main-section .image-wrapper:hover img {
transform: scale(1.05);
}
.single-service-page-main-section .experience-badge {
position: absolute;
bottom: 30px;
right: -20px;
background: white;
padding: 15px 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .experience-badge .years {
display: block;
font-size: 1.8em;
font-weight: 700;
color: #00664f;
}
.single-service-page-main-section .experience-badge .text {
font-size: 0.9em;
color: #666;
}
.single-service-page-main-section .tech-stack {
display: flex;
gap: 15px;
margin-top: 20px;
justify-content: center;
}
.single-service-page-main-section .tech-item {
width: 45px;
height: 45px;
background: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color:#00664f;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.single-service-page-main-section .tech-item:hover {
transform: translateY(-5px);
color: white;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
}
@media (max-width: 1024px) {
.single-service-page-main-section .about-service-content {
flex-direction: column;
}
.single-service-page-main-section .about-title {
font-size: 2.3em;
}
.single-service-page-main-section .about-service-image {
margin-top: 50px;
}
}
@media (max-width: 768px) {
.single-service-page-main-section .about-service {
padding: 60px 0;
}
.single-service-page-main-section .service-cta {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.single-service-page-main-section .service-stats {
width: 100%;
justify-content: space-around;
}
}
@media (max-width: 480px) {
.single-service-page-main-section .highlight-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.single-service-page-main-section .tech-stack {
flex-wrap: wrap;
justify-content: center;
}
}
.single-service-page-main-section .services-showcase {
display: grid;
grid-template-columns: 250px 1fr;
gap: 40px;
margin-top: 50px;
position: relative;
}
/* 3D Card Styles */
.single-service-page-main-section .service-display {
grid-column: 2;
height: 400px;
perspective: 1500px;
}
.single-service-page-main-section .service-card-3d {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.single-service-page-main-section .service-card-3d:hover {
transform: rotateY(180deg);
}
.single-service-page-main-section .service-card-front,
.single-service-page-main-section .service-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 30px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .service-card-front {
background:  var(--gradient);
}
.single-service-page-main-section .service-card-back {
transform: rotateY(180deg);
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
color: white;
}
/* Navigation Styles */
.single-service-page-main-section .service-nav {
grid-column: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.single-service-page-main-section .service-nav-item {
padding: 20px;
background: white;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.service-nav-item.active {
background:#000;
color: white;
transform: translateX(20px);
}
.single-service-page-main-section .service-nav-item i {
font-size: 24px;
transition: transform 0.3s ease;
}
.single-service-page-main-section .service-nav-item:hover i {
transform: scale(1.2);
}
/* Details Panel Styles */
.single-service-page-main-section .service-details-panel {
position: absolute;
right: -300px;
top: 0;
width: 280px;
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .detail-section {
margin-bottom: 30px;
}
.single-service-page-main-section .tech-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.single-service-page-main-section .tech-badges span {
padding: 8px 15px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.1),
rgba(11, 205, 240, 0.1)
);
border-radius: 20px;
font-size: 0.9em;
color: #00664f;
}
.single-service-page-main-section .process-steps {
margin-top: 15px;
}
.single-service-page-main-section .step {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.single-service-page-main-section .step-number {
width: 40px;
height: 40px;
background: linear-gradient(
90deg,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
}
/* Animations */
@keyframes floatIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.single-service-page-main-section .service-card-3d {
animation: floatIn 0.8s ease-out forwards;
}
/* Responsive Styles */
@media (max-width: 1200px) {
.single-service-page-main-section .service-details-panel {
position: static;
width: 100%;
margin-top: 30px;
}
}
@media (max-width: 768px) {
.single-service-page-main-section .services-showcase {
grid-template-columns: 1fr;
}
.single-service-page-main-section .service-nav {
grid-row: 2;
flex-direction: row;
overflow-x: auto;
padding: 20px 0;
}
.single-service-page-main-section .service-nav-item {
min-width: 200px;
}
.single-service-page-main-section .service-nav-item.active {
transform: translateY(-10px);
}
}
/* What We Offer Section Styles */
.single-service-page-main-section .offer-section {
padding: 80px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}
.single-service-page-main-section .offer-title {
text-align: center;
font-size: 2.5em;
margin-bottom: 60px;
color: #333;
position: relative;
}
.single-service-page-main-section .offer-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient);
}
.single-service-page-main-section .offer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.single-service-page-main-section .offer-item {
position: relative;
height: 300px;
perspective: 1000px;
}
.single-service-page-main-section .offer-content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 20px;
background: white;
padding: 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.single-service-page-main-section .offer-item:hover .offer-content {
transform: rotateY(180deg);
}
.single-service-page-main-section .offer-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, rgb(0 0 0 / 97%), rgb(15 16 16));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
color: #ffffff;
transition: all 0.3s ease;
}
.single-service-page-main-section .offer-content h3 {
font-size: 1.3em;
color: #333;
margin-bottom: 15px;
}
.single-service-page-main-section .offer-content p {
color: #666;
margin-bottom: 20px;
font-size: 14px;
}
.single-service-page-main-section .offer-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgb(0 0 0), rgb(0 0 0));
border-radius: 20px;
padding: 30px;
color: white;
backface-visibility: hidden;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
}
.single-service-page-main-section .offer-hover ul {
list-style: none;
margin-bottom: 30px;
font-size: 14px;
}
.single-service-page-main-section .offer-hover ul li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
font-size: 1.1em;
}
.single-service-page-main-section .offer-hover ul li i {
font-size: 16px;
}
.single-service-page-main-section .offer-btn {
display: inline-block;
padding: 12px 30px;
background: white;
color: #00664f;
text-decoration: none;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
}
.single-service-page-main-section .offer-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
@keyframes iconRotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
/* Responsive Styles */
@media (max-width: 768px) {
.single-service-page-main-section .offer-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.single-service-page-main-section .offer-item {
height: 280px;
}
.single-service-page-main-section .offer-content {
padding: 20px;
}
.single-service-page-main-section .offer-icon {
width: 60px;
height: 60px;
font-size: 25px;
}
.single-service-page-main-section .offer-content h3 {
font-size: 1.3em;
}
}
@media (max-width: 480px) {
.single-service-page-main-section .offer-title {
font-size: 2em;
}
.single-service-page-main-section .offer-item {
height: 260px;
}
}
.single-service-page-main-section .section-title {
text-align: center;
font-size: 2.5em;
margin-bottom: 50px;
color: #333;
position: relative;
}
.single-service-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background:#000;
}
/* प्रोसेस सेक्शन अपडेट्स */
.single-service-page-main-section .process-section .section-title {
margin-bottom: 60px;
}
/* व्हाई चूज अस सेक्शन अपडेट्स */
.single-service-page-main-section .why-choose-us .section-title {
margin-bottom: 60px;
}
/* FAQ सेक्शन अपडेट्स */
.single-service-page-main-section .faq-section .section-title {
margin-bottom: 60px;
}
/* Responsive Styles */
@media (max-width: 768px) {
.single-service-page-main-section .section-title {
font-size: 2em;
margin-bottom: 40px;
}
}
@media (max-width: 480px) {
.single-service-page-main-section .section-title {
font-size: 1.8em;
margin-bottom: 30px;
}
}
/* Blog Page Css Start */
/* Blog Page Styles */
.blog-page-wrapper {
background: #f8f9fa;
}
/* Blog Hero Section */
.blog-page-wrapper .blog-hero {background: linear-gradient(135deg, rgb(5 5 5) 0%, rgb(0 0 0) 100%);padding: 100px 0 120px;position: relative;text-align: center;color: white;}
.blog-page-wrapper .blog-hero .page-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
animation: fadeInUp 1s ease;
}
.blog-page-wrapper .blog-hero .page-description {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
animation: fadeInUp 1s ease 0.2s both;
}
.blog-page-wrapper .blog-hero .hero-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: #f8f9fa;
clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
/* Blog Categories */
.blog-page-wrapper .blog-categories {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin: -30px 0 50px;
position: relative;
z-index: 1;
}
.blog-page-wrapper .category-btn {
padding: 10px 20px;
border: none;
background: white;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.blog-page-wrapper .category-btn.active,
.blog-page-wrapper .category-btn:hover {
background:#000;
color: white;
transform: translateY(-2px);
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
padding: 30px 0;
}
.blog-page-wrapper .blog-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.blog-page-wrapper .blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.blog-page-wrapper .blog-image {
position: relative;
height: 240px;
overflow: hidden;
}
.blog-page-wrapper .blog-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
}
.blog-page-wrapper .blog-card:hover .blog-image img {
transform: scale(1.1);
}
.blog-page-wrapper .blog-image .blog-categories {
position: absolute;
bottom: 15px;
left: 15px;
margin: 0;
}
.blog-page-wrapper .blog-category {
background: #000;
color: white;
padding: 5px 15px;
border-radius: 15px;
font-size: 0.8rem;
margin-right: 10px;
}
.blog-page-wrapper .blog-content {
padding: 25px;
}
.blog-page-wrapper .blog-meta {
display: flex;
gap: 20px;
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
}
.blog-page-wrapper .blog-meta i {
color:#00664f;
margin-right: 5px;
}
.blog-page-wrapper .blog-title {
font-size: 1.4rem;
margin-bottom: 15px;
line-height: 1.4;
}
.blog-page-wrapper .blog-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.blog-page-wrapper .blog-title a:hover {
color:#00664f;
}
.blog-page-wrapper .blog-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.blog-page-wrapper .read-more {
display: inline-flex;
align-items: center;
gap: 10px;
color: #00664f;
text-decoration: none;
font-weight: 500;
transition: gap 0.3s ease;
}
.blog-page-wrapper .read-more:hover {
gap: 15px;
}
/* Pagination */
.blog-page-wrapper .blog-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin: 50px 0;
}
.blog-page-wrapper .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
text-decoration: none;
color: #333;
font-weight: 500;
transition: all 0.3s ease;
}
.blog-page-wrapper .page-numbers.current,
.blog-page-wrapper .page-numbers:hover {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1) 0%,
rgba(11, 205, 240, 1) 100%
);
color: white;
}
/* Newsletter Section */
.blog-page-wrapper .newsletter-section {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.05) 0%,
rgba(11, 205, 240, 0.05) 100%
);
padding: 80px 0;
text-align: center;
}
.blog-page-wrapper .newsletter-content {
max-width: 600px;
margin: 0 auto;
}
.blog-page-wrapper .newsletter-content h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
}
.blog-page-wrapper .newsletter-form {
display: flex;
gap: 15px;
margin-top: 30px;
}
.blog-page-wrapper .newsletter-form input {
flex: 1;
padding: 15px 25px;
border: 1px solid #ddd;
border-radius: 30px;
font-size: 1rem;
}
.blog-page-wrapper .newsletter-form button {
padding: 15px 30px;
background: #000;
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: transform 0.3s ease;
}
.blog-page-wrapper .newsletter-form button:hover {
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.blog-hero .page-title {
font-size: 2.5rem;
}
.blog-page-wrapper .blog-grid {
grid-template-columns: 1fr;
}
.blog-page-wrapper .newsletter-form {
flex-direction: column;
}
.blog-page-wrapper .newsletter-form button {
width: 100%;
justify-content: center;
}
}
/* Blog Page Css End */
/* About Page Css Start */
.about-page-main-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 1;
flex-direction: column;
}
/* Hero Section */
.about-page-main-page .hero-section {
background:  linear-gradient(135deg, rgb(7 7 7) 0%, rgb(0 0 0) 100%);
min-height: 30vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 4rem 0;
}
.about-page-main-page .main-title {
color: white;
font-size: 4rem;
text-align: center;
margin-bottom: 1rem;
position: relative;
}
.about-page-main-page .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.5rem;
text-align: center;
}
.about-page-main-page .floating-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.about-page-main-page .float-item {
position: absolute;
background:  var(--gradient);
border-radius: 50%;
animation: float 20s infinite linear;
}
.about-page-main-page .float-item:nth-child(1) {
width: 300px;
height: 300px;
top: -150px;
left: -150px;
animation-delay: 0s;
}
.about-page-main-page .float-item:nth-child(2) {
width: 200px;
height: 200px;
top: 50%;
right: -100px;
animation-delay: -5s;
}
.about-page-main-page .float-item:nth-child(3) {
width: 150px;
height: 150px;
bottom: -75px;
left: 50%;
animation-delay: -10s;
}
/* Story Section */
.about-page-main-page .story-section {
padding: 6rem 0;
background: white;
}
.about-page-main-page .story-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-page-main-page .story-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.about-page-main-page .story-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-page-main-page .story-image:hover img {
transform: scale(1.1);
}
.about-page-main-page .story-text h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
background:#000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Mission Section */
.about-page-main-page .mission-section {
padding: 8rem 0;
background: linear-gradient(
135deg,
rgba(2, 3, 129, 0.03) 0%,
rgba(40, 116, 252, 0.03) 100%
);
position: relative;
overflow: hidden;
}
/* Background Pattern */
.about-page-main-page .mission-section::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(
circle at 0% 0%,
rgba(2, 3, 129, 0.05) 0%,
transparent 50%
),
radial-gradient(
circle at 100% 100%,
rgba(40, 116, 252, 0.05) 0%,
transparent 50%
);
animation: rotateBgSlow 30s linear infinite;
}
/* Enhanced Mission Cards */
.about-page-main-page .mission-card {
padding: 3rem 2rem;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
position: relative;
z-index: 1;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.about-page-main-page .mission-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: #000;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.about-page-main-page .mission-card i {
font-size: 3rem;
margin-bottom: 2rem;
position: relative;
display: inline-block;
}
/* Icon Glow Effect */
.about-page-main-page .mission-card i::before {
background: #000;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 15px rgba(40, 116, 252, 0.3));
}
/* Floating Icon Background */
.about-page-main-page .mission-card i::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(
circle,
rgba(40, 116, 252, 0.1) 0%,
rgba(2, 3, 129, 0.05) 50%,
transparent 70%
);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulseIcon 3s infinite ease-in-out;
z-index: -1;
}
.about-page-main-page .mission-card h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
background:#000;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
display: inline-block;
}
.about-page-main-page .mission-card p {
color: #666;
line-height: 1.8;
font-size: 1.1rem;
position: relative;
z-index: 1;
}
/* Enhanced Hover Effects */
.about-page-main-page .mission-card:hover {
transform: translateY(-15px) scale(1.03);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(40, 116, 252, 0.1),
inset 0 0 15px rgba(255, 255, 255, 0.5);
}
.about-page-main-page .mission-card:hover i::after {
animation: pulseIconHover 2s infinite ease-in-out;
}
/* New Animations */
@keyframes pulseIcon {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
}
@keyframes pulseIconHover {
0%,
100% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.7;
}
50% {
transform: translate(-50%, -50%) scale(1.4);
opacity: 1;
}
}
@keyframes rotateBgSlow {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.1);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* Mission Grid Layout */
.about-page-main-page .mission-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
padding: 2rem 0;
}
/* Team Section */
.about-page-main-page .team-section {
padding: 6rem 0;
background: white;
}
.about-page-main-page .team-section h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 4rem;
background:  var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-page-main-page .team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.about-page-main-page .team-card {
background: white;
border-radius: 15px;
overflow: hidden;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.about-page-main-page .team-card:hover {
transform: translateY(-10px);
}
.about-page-main-page .team-image {
width: 100%;
height: 300px;
overflow: hidden;
}
.about-page-main-page .team-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.about-page-main-page .team-card:hover .team-image img {
transform: scale(1.1);
}
.about-page-main-page .team-card h3 {
margin: 1.5rem 0 0.5rem;
color: #333;
}
.about-page-main-page .team-card p {
color: #666;
margin-bottom: 1rem;
}
.about-page-main-page .social-links {
padding: 1rem;
}
.about-page-main-page .social-links a {
color: rgb(2, 3, 129);
margin: 0 0.5rem;
font-size: 1.2rem;
transition: color 0.3s ease;
color: white;
display: flex !important;
justify-content: center;
align-items: center;
text-decoration: none;
}
.about-page-main-page .social-links a:hover {
color: white;
}
/* Stats Section */
.about-page-main-page .stats-section {
padding: 6rem 0;
background: linear-gradient(
135deg,
rgb(2, 3, 129) 0%,
rgb(40, 116, 252) 100%
);
color: white;
}
.about-page-main-page .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.about-page-main-page .stat-card {
text-align: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.about-page-main-page .stat-card:hover {
transform: translateY(-10px);
}
.about-page-main-page .stat-card h3 {
font-size: 3rem;
margin-bottom: 1rem;
}
/* Animations */
@keyframes float {
0% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(20px, -20px) rotate(180deg);
}
100% {
transform: translate(0, 0) rotate(360deg);
}
}
/* Responsive Design */
@media (max-width: 1200px) {
.about-page-main-page .container {
max-width: 95%;
}
}
@media (max-width: 992px) {
.about-page-main-page .story-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-page-main-page .main-title {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.about-page-main-page .main-title {
font-size: 2.5rem;
}
.about-page-main-page .subtitle {
font-size: 1.2rem;
}
.about-page-main-page .mission-grid,
.about-page-main-page .team-grid,
.about-page-main-page .stats-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.about-page-main-page .story-text h2,
.about-page-main-page .mission-section h2,
.about-page-main-page .team-section h2 {
font-size: 2rem;
}
.about-page-main-page .mission-section {
padding: 6rem 0;
}
.about-page-main-page .mission-card {
padding: 2.5rem 1.5rem;
}
.about-page-main-page .mission-card i {
font-size: 2.5rem;
}
.about-page-main-page .mission-card h3 {
font-size: 1.5rem;
}
.about-page-main-page .mission-card p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.about-page-main-page .main-title {
font-size: 2rem;
}
.about-page-main-page .team-image {
height: 250px;
}
}
/* Enhanced Visual Effects */
.about-page-main-page .hero-section::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 20% 30%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 70%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%
);
animation: pulseGlow 8s infinite alternate;
}
/* Glowing particles */
.about-page-main-page .particle {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
filter: blur(1px);
animation: particleFloat 15s infinite linear;
opacity: 0.6;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
}
.about-page-main-page .hero-section::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.2"/></svg>')
center/50px 50px;
animation: rotateBg 30s linear infinite;
opacity: 0.1;
}
/* Enhanced Card Styles */
.about-page-main-page .mission-card,
.about-page-main-page .team-card,
.about-page-main-page .stat-card {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.about-page-main-page .mission-card::before,
.about-page-main-page .team-card::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
/* Enhanced Story Section */
.about-page-main-page .story-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(2, 3, 129, 0.2),
rgba(40, 116, 252, 0.2)
);
opacity: 0;
transition: opacity 0.3s ease;
}
.about-page-main-page .story-image:hover::before {
opacity: 1;
}
/* 3D Transform Effects */
.about-page-main-page .mission-card:hover,
.about-page-main-page .team-card:hover {
transform: translateY(-15px) scale(1.02) perspective(1000px) rotateX(10deg)
rotateY(-10deg);
box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1),
-20px -20px 60px rgba(255, 255, 255, 0.8),
inset 0 0 15px rgba(255, 255, 255, 0.5);
}
/* Floating Animation for Stats */
.about-page-main-page .stat-card {
animation: floatCard 6s ease-in-out infinite;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.about-page-main-page .stat-card:nth-child(1) {
animation-delay: 0s;
}
.about-page-main-page .stat-card:nth-child(2) {
animation-delay: -1.5s;
}
.about-page-main-page .stat-card:nth-child(3) {
animation-delay: -3s;
}
.about-page-main-page .stat-card:nth-child(4) {
animation-delay: -4.5s;
}
/* Enhanced Text Effects */
.about-page-main-page .main-title {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
animation: glowText 3s infinite alternate;
}
/* New Animations */
@keyframes pulseGlow {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
@keyframes shimmer {
0% {
transform: translate(-100%, -100%) rotate(45deg);
}
100% {
transform: translate(100%, 100%) rotate(45deg);
}
}
@keyframes floatCard {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes glowText {
0%,
100% {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);
}
50% {
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
0 0 30px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);
}
}
@keyframes rotateBg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Enhanced Mission Cards */
.about-page-main-page .mission-card i {
position: relative;
z-index: 1;
}
.about-page-main-page .mission-card i::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: radial-gradient(circle, rgba(2, 3, 129, 0.1) 0%, transparent 70%);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 0.5;
}
}
/* Team Card Enhancements */
.about-page-main-page .team-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
45deg,
rgba(2, 3, 129, 0.2),
rgba(40, 116, 252, 0.2)
);
opacity: 0;
transition: opacity 0.3s ease;
}
.about-page-main-page .team-card:hover .team-image::after {
opacity: 1;
}
.about-page-main-page .social-links a {
position: relative;
display: inline-block;
}
.about-page-main-page .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(2, 3, 129, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s ease;
}
.about-page-main-page .social-links a:hover::before {
transform: scale(1.5);
}
/* About Page Css End */
/* Projects Page Css Start */
.projects-page-main-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
}
/* Hero Section */
.projects-page-main-page .hero-section {
background: linear-gradient(
135deg,
rgb(1, 1, 1) 0%,
rgb(0, 0, 0) 100%
);
min-height: 45vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 3rem 0;
}
.projects-page-main-page .hero-section::before {
content: "";
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(
circle at 20% 30%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 70%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%
);
animation: rotateBg 30s infinite linear;
}
.projects-page-main-page .main-title {
color: white;
font-size: 4rem;
text-align: center;
margin-bottom: 1rem;
}
.projects-page-main-page .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.5rem;
text-align: center;
}
/* Professional Project Section Styling */
.projects-page-main-page .projects-section {
background: linear-gradient(
135deg,
rgba(2, 3, 129, 0.05) 0%,
rgba(40, 116, 252, 0.05) 100%
);
position: relative;
overflow: hidden;
padding: 5rem 0;
}
/* Refined Grid Layout */
.projects-page-main-page .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
padding: 1rem;
}
/* Floating Elements */
.projects-page-main-page .floating-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.projects-page-main-page .float-element {
position: absolute;
background: linear-gradient(
135deg,
rgba(2, 3, 129, 0.1),
rgba(40, 116, 252, 0.1)
);
border-radius: 50%;
animation: float 20s infinite ease-in-out;
}
.projects-page-main-page .float-element:nth-child(1) {
width: 300px;
height: 300px;
top: 10%;
left: -150px;
animation-delay: 0s;
}
.projects-page-main-page .float-element:nth-child(2) {
width: 200px;
height: 200px;
top: 60%;
right: -100px;
animation-delay: -5s;
}
.projects-page-main-page .float-element:nth-child(3) {
width: 150px;
height: 150px;
bottom: 10%;
left: 50%;
animation-delay: -10s;
}
/* Modern Project Cards */
.projects-page-main-page .project-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(2, 3, 129, 0.08),
0 0 0 1px rgba(40, 116, 252, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.projects-page-main-page .project-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(2, 3, 129, 0.1),
rgba(40, 116, 252, 0.1)
);
opacity: 0;
transition: opacity 0.4s ease;
}
.projects-page-main-page .project-card:hover {
transform: translateY(-12px);
box-shadow: 0 22px 40px rgba(2, 3, 129, 0.15),
0 0 0 2px rgba(40, 116, 252, 0.1);
}
.projects-page-main-page .project-card:hover::before {
opacity: 1;
}
/* Enhanced Image Container */
.projects-page-main-page .project-image {
height: 240px;
position: relative;
overflow: hidden;
}
.projects-page-main-page .project-image img {
width: 100%;
height: auto;
transition: transform 15s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.projects-page-main-page .project-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(2, 3, 129, 0.05) 50%,
rgba(40, 116, 252, 0.15) 100%
);
opacity: 0;
transition: opacity 0.4s ease;
}
.projects-page-main-page .project-card:hover .project-image img {
transform: translateY(calc(-100% + 240px));
}
.projects-page-main-page .project-card:hover .project-image::after {
opacity: 1;
}
/* Refined Content Area */
.projects-page-main-page .project-content {
padding: 1.8rem;
background: transparent;
position: relative;
z-index: 1;
}
.projects-page-main-page .project-content h3 {
font-size: 1.4rem;
font-weight: 600;
color: rgb(0,0,0);
margin-bottom: 0.8rem;
transition: color 0.3s ease;
}
.projects-page-main-page .project-content p {
font-size: 0.95rem;
color: #555;
margin-bottom: 1.5rem;
line-height: 1.6;
}
/* Modern Project Links */
.projects-page-main-page .project-links {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(2, 3, 129, 0.1);
}
.projects-page-main-page .view-project {
padding: 0.6rem 1.2rem;
background: linear-gradient(135deg, rgb(0,0,0) 0%, rgb(0,0,0) 100% );
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
opacity: 0.9;
}
.projects-page-main-page .view-project:hover {
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(2, 3, 129, 0.2);
}
.projects-page-main-page .github-link {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: rgb(2, 3, 129);
background: rgba(2, 3, 129, 0.1);
transition: all 0.3s ease;
}
.projects-page-main-page .github-link:hover {
background: rgb(2, 3, 129);
color: white;
transform: rotate(360deg);
}
/* Professional Stats Section */
.projects-page-main-page .stats-section {
padding: 4rem 0;
background: white;
}
.projects-page-main-page .stats-grid {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 2rem;
padding: 0 1rem;
}
.projects-page-main-page .stat-card {
text-align: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 8px;
transition: transform 0.3s ease;
flex: 1;
min-width: 200px;
max-width: 300px;
}
.projects-page-main-page .stat-card:hover {
transform: translateY(-5px);
}
.projects-page-main-page .stat-card i {
font-size: 2rem;
color: rgb(2, 3, 129);
margin-bottom: 1rem;
}
.projects-page-main-page .stat-card h3 {
font-size: 2rem;
color: rgb(2, 3, 129);
margin-bottom: 0.5rem;
}
.projects-page-main-page .stat-card p {
color: #666;
font-size: 0.9rem;
}
/* Professional CTA Section */
.projects-page-main-page .cta-section {
background: linear-gradient(
135deg,
rgb(2, 3, 129) 0%,
rgb(40, 116, 252) 100%
);
position: relative;
overflow: hidden;
padding: 6rem 0;
}
.projects-page-main-page .cta-section::before {
content: "";
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(
circle at 0% 0%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%
),
radial-gradient(
circle at 100% 100%,
rgba(255, 255, 255, 0.1) 0%,
transparent 50%
);
animation: rotateBg 30s infinite linear;
}
.projects-page-main-page .cta-content {
position: relative;
z-index: 1;
text-align: center;
color: white;
}
.projects-page-main-page .cta-section h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.projects-page-main-page .cta-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.projects-page-main-page .cta-button {
background: white;
color: rgb(2, 3, 129);
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.projects-page-main-page .cta-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.5);
}
/* Enhanced Filter Buttons */
.projects-page-main-page .filter-buttons {
margin-bottom: 3rem;
}
.projects-page-main-page .filter-btn {
padding: 0.7rem 1.4rem;
background: white;
border: 1px solid rgba(2, 3, 129, 0.15);
border-radius: 25px;
font-size: 0.95rem;
font-weight: 500;
color: #000000;
transition: all 0.3s ease;
}
.projects-page-main-page .filter-btn:hover,
.projects-page-main-page .filter-btn.active {
background: linear-gradient(
135deg,
rgb(0,0,0) 0%,
rgb(0,0,0) 100%
);
color: white;
border-color: transparent;
box-shadow: 0 5px 15px rgba(2, 3, 129, 0.15);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.projects-page-main-page .hero-section {
min-height: 40vh;
padding: 2rem 0;
}
.projects-page-main-page .project-image {
height: 200px;
}
.projects-page-main-page .projects-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.projects-page-main-page .stats-grid {
flex-wrap: wrap;
}
.projects-page-main-page .stat-card {
min-width: 150px;
flex: 0 1 calc(50% - 1rem);
}
.projects-page-main-page .filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.projects-page-main-page .filter-btn {
margin: 0.5rem;
}
}
@media (max-width: 480px) {
.projects-page-main-page .hero-section {
min-height: 35vh;
}
.projects-page-main-page .project-image {
height: 180px;
}
.projects-page-main-page .stat-card {
flex: 0 1 100%;
}
}
/* Animations */
@keyframes float {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(20px, -20px) rotate(180deg);
}
}
@keyframes rotateBg {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.1);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* Projects Page Css End */
/* Process Timeline Styles */
.timeline-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline-container::after {
content: "";
position: absolute;
width: 2px;
background: #006e51;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}
.timeline-item:nth-child(odd) {
left: 0;
}
.timeline-item:nth-child(even) {
left: 50%;
}
.timeline-number {
position: absolute;
width: 40px;
height: 40px;
right: -20px;
background: #006e51;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
z-index: 1;
}
.timeline-item:nth-child(even) .timeline-number {
left: -20px;
}
.timeline-content {
padding: 20px;
background: #f5f5f5;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.timeline-container::after {
left: 31px;
}
.timeline-item {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.timeline-item:nth-child(even) {
left: 0;
}
.timeline-number {
left: 10px;
right: auto;
}
.timeline-item:nth-child(even) .timeline-number {
left: 10px;
}
}
/* Custom Content Section Styles */
.custom-content-section {
padding: 60px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.custom-content-wrapper {
max-width: 100%;
margin: 0 auto;
position: relative;
}
.content-header {
text-align: center;
margin-bottom: 30px;
position: relative;
}
.header-line {
width: 80px;
height: 4px;
background: #000;
margin: 15px auto;
border-radius: 2px;
}
.custom-content-box {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
padding: 40px;
height: 400px;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}
.scrollable-content {
height: 100%;
overflow-y: auto;
padding-right: 20px;
}
/* Custom Scrollbar Styles */
.scrollable-content::-webkit-scrollbar {
width: 8px;
}
.scrollable-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.scrollable-content::-webkit-scrollbar-thumb {
background: linear-gradient(
to bottom,
rgba(36, 36, 225, 0.7),
rgba(11, 205, 240, 0.7)
);
border-radius: 4px;
transition: all 0.3s ease;
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
to bottom,
rgba(36, 36, 225, 1),
rgba(11, 205, 240, 1)
);
}
/* Content Styling */
.scrollable-content h3 {
color: #333;
font-size: 1.4em;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(36, 36, 225, 0.1);
}
.scrollable-content p {
color: #666;
line-height: 1.8;
margin-bottom: 20px;
}
.scrollable-content ul {
list-style: none;
padding-left: 0;
}
.scrollable-content ul li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #666;
}
.scrollable-content ul li:before {
content: "→";
position: absolute;
left: 0;
color: #00664f;
}
/* Responsive Design */
@media (max-width: 768px) {
.custom-content-box {
padding: 25px;
height: 350px;
}
.scrollable-content {
padding-right: 15px;
}
}
/* Single Blog Page Styles */
.single-blog-wrapper {
background: #f8f9fa;
font-family: "Lora", serif !important;
}
.single-blog-wrapper ul{
margin-left:30px;
}
.single-blog-wrapper .container {
margin: 0 auto;
padding: 0 20px;
max-width: 2000px;
}
.single-blog-wrapper .container h1{
font-family: "Lora", serif;
}
/* Blog Hero Section */
.single-blog-wrapper .blog-hero {
background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(0 0 0) 100%);
padding: 60px 0;
color: white;
}
.single-blog-wrapper .blog-hero .container {
max-width: 1400px !important;
margin: 0 auto;
padding: 0 20px;
}
.single-blog-wrapper .post-meta {
display: flex;
gap: 20px;
margin-bottom: 20px;
font-size: 0.9rem;
}
.single-blog-wrapper .post-meta i {
margin-right: 5px;
}
.single-blog-wrapper .post-category {
background: rgba(255, 255, 255, 0.2);
padding: 5px 15px;
border-radius: 20px;
}
.single-blog-wrapper .post-title {
font-size: 2.5rem;
font-family: "Lora", serif;
margin-bottom: 30px;
line-height: 1.3;
}
.single-blog-wrapper .featured-image {
margin: 30px 0;
border-radius: 15px;
overflow: hidden;
}
.single-blog-wrapper .featured-image img {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
}
/* Blog Content Section */
.single-blog-wrapper .blog-content-section {
padding: 60px 0;
}
.single-blog-wrapper .content-wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}
.single-blog-wrapper .main-content {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
font-family: "Lora", serif !important;
}
.single-blog-wrapper .post-content {
font-size: 1.1rem;
line-height: 1.8;
color: #444;
font-family: "Lora", serif !important;
}
.single-blog-wrapper .post-tags {
margin: 30px 0;
padding-top: 20px;
border-top: 1px solid #eee;
}
.single-blog-wrapper .post-tags a{
text-decoration: none;
background-color: #000;
padding: 5px 10px;
border-radius: 40px;
color:white;
display: inline-block;
}
.single-blog-wrapper .tag-label {
font-weight: 500;
margin-right: 10px;
}
/* Share Buttons */
.single-blog-wrapper .share-buttons {
margin: 30px 0;
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.single-blog-wrapper .share-buttons h3 {
margin-bottom: 15px;
}
.single-blog-wrapper .share-links {
display: flex;
gap: 15px;
}
.single-blog-wrapper .share-links a {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: transform 0.3s ease;
}
.single-blog-wrapper .share-links a:hover {
transform: translateY(-3px);
}
.single-blog-wrapper .facebook {
background: #3b5998;
}
.single-blog-wrapper .twitter {
background: #1da1f2;
}
.single-blog-wrapper .linkedin {
background: #0077b5;
}
.single-blog-wrapper .whatsapp {
background: #25d366;
}
/* Author Box */
.single-blog-wrapper .author-box {
display: flex;
gap: 20px;
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
margin: 30px 0;
}
.single-blog-wrapper .author-avatar img {
border-radius: 50%;
}
.single-blog-wrapper .author-info h3 {
margin-bottom: 10px;
}
/* Related Posts */
.single-blog-wrapper .related-posts {
margin-top: 40px;
}
.single-blog-wrapper .posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}
.single-blog-wrapper .related-post-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.single-blog-wrapper .related-post-card:hover {
transform: translateY(-5px);
}
.single-blog-wrapper .post-thumbnail img {
width: 100%;
height: 200px;
object-fit: cover;
}
.single-blog-wrapper .post-content {
padding: 20px;
font-family: "Lora", serif !important;
}
.single-blog-wrapper .post-content h3 {
font-size: 1.1rem;
margin-bottom: 10px;
font-family: "Lora", serif !important;
}
.single-blog-wrapper .post-content h3 a {
color: #333;
text-decoration: none;
font-family: "Lora", serif !important;
}
/* Sidebar */
.single-blog-wrapper .blog-sidebar {
position: sticky;
top: 20px;
}
.single-blog-wrapper .sidebar-widget {
background: white;
padding: 25px;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.single-blog-wrapper .sidebar-widget h3 {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.single-blog-wrapper .categories-list {
list-style: none;
padding: 0;
}
.single-blog-wrapper .categories-list li {
margin-bottom: 10px;
}
.single-blog-wrapper .categories-list a {
color: #666;
text-decoration: none;
transition: color 0.3s ease;
}
.single-blog-wrapper .categories-list a:hover {
color: #00664f;
}
.single-blog-wrapper .recent-posts-list {
list-style: none;
padding: 0;
}
.single-blog-wrapper .recent-posts-list li {
margin-bottom: 15px;
}
.single-blog-wrapper .recent-posts-list a {
display: flex;
gap: 15px;
color: #333;
text-decoration: none;
}
.single-blog-wrapper .post-thumb img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 8px;
}
.single-blog-wrapper .post-info h4 {
font-size: 0.9rem;
margin-bottom: 5px;
}
.single-blog-wrapper .post-date {
font-size: 0.8rem;
color: white;
}
/* Responsive Design */
@media (max-width: 992px) {
.single-blog-wrapper .content-wrapper {
grid-template-columns: 1fr;
}
.single-blog-wrapper .posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.single-blog-wrapper .post-title {
font-size: 2rem;
}
.single-blog-wrapper .main-content {
padding: 25px;
font-family: "Lora", serif;
}
.single-blog-wrapper .posts-grid {
grid-template-columns: 1fr;
}
.single-blog-wrapper .post-meta {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.single-blog-wrapper .author-box {
flex-direction: column;
text-align: center;
}
.single-blog-wrapper .share-links {
justify-content: center;
}
}
/* Service Page Sidebar Styles */
.single-blog-wrapper .search-widget {
position: relative;
margin-bottom: 30px;
}
.single-blog-wrapper .search-form {
display: flex;
gap: 10px;
}
.single-blog-wrapper .search-field {
flex: 1;
padding: 12px 20px;
border: 2px solid #eee;
border-radius: 30px;
font-size: 1rem;
transition: all 0.3s ease;
}
.single-blog-wrapper .search-field:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 0 15px rgba(36, 36, 225, 0.1);
outline: none;
}
.single-blog-wrapper .search-submit {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1) 0%,
rgba(11, 205, 240, 1) 100%
);
color: white;
border: none;
padding: 12px 25px;
border-radius: 30px;
cursor: pointer;
transition: transform 0.3s ease;
}
.single-blog-wrapper .search-submit:hover {
transform: translateY(-2px);
}
/* Sidebar Lead Form */
.single-blog-wrapper .sidebar-lead-form {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(36, 36, 225, 0.1);
}
.single-blog-wrapper .sidebar-lead-form h3 {
font-size: 1.3rem;
margin-bottom: 20px;
text-align: center;
color: #333;
}
.single-blog-wrapper .lead-form-group {
margin-bottom: 15px;
}
.single-blog-wrapper .lead-form-group input,
.single-blog-wrapper .lead-form-group textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #eee;
border-radius: 8px;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.single-blog-wrapper .lead-form-group input:focus,
.single-blog-wrapper .lead-form-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 0 15px rgba(36, 36, 225, 0.1);
outline: none;
}
.single-blog-wrapper .lead-form-submit {
width: 100%;
background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(0 0 0) 100%);
color: white;
border: none;
padding: 12px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s ease;
}
.single-blog-wrapper .lead-form-submit:hover {
transform: translateY(-2px);
}
/* Comments Section Styles */
.single-blog-wrapper .comments-section {
margin-top: 60px;
padding: 40px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.single-blog-wrapper .comments-title {
font-size: 1.8rem;
color: #333;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #eee;
}
.single-blog-wrapper .comment-list {
list-style: none;
padding: 0;
}
.single-blog-wrapper .comment {
background: #f8f9fa;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
transition: transform 0.3s ease;
}
.single-blog-wrapper .comment:hover {
transform: translateY(-3px);
}
.comment-author {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.single-blog-wrapper .comment-author img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.single-blog-wrapper .comment-author .fn {
font-weight: 600;
color: #333;
font-size: 1.1rem;
}
.single-blog-wrapper .comment-metadata {
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
}
.single-blog-wrapper .comment-content {
color: #444;
line-height: 1.7;
}
.single-blog-wrapper .comment-content p {
margin-bottom: 15px;
}
.single-blog-wrapper .reply {
margin-top: 15px;
text-align: right;
}
.single-blog-wrapper .reply a {
background: white;
color: rgba(36, 36, 225, 1);
text-decoration: none;
padding: 8px 20px;
border-radius: 20px;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.single-blog-wrapper .reply a:hover {
background: rgba(36, 36, 225, 1);
color: white;
transform: translateY(-2px);
}
/* Comment Form */
.single-blog-wrapper .comment-respond {
background: white;
padding: 30px;
border-radius: 12px;
margin-top: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.single-blog-wrapper .comment-reply-title {
font-size: 1.5rem;
color: #333;
margin-bottom: 25px;
}
.single-blog-wrapper .comment-form {
display: grid;
gap: 20px;
}
.single-blog-wrapper .comment-form-author,
.single-blog-wrapper .comment-form-email,
.single-blog-wrapper .comment-form-url {
display: grid;
gap: 8px;
}
.single-blog-wrapper .comment-form input[type="text"],
.single-blog-wrapper .comment-form input[type="email"],
.single-blog-wrapper .comment-form input[type="url"],
.single-blog-wrapper .comment-form textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #eee;
border-radius: 8px;
transition: all 0.3s ease;
}
.single-blog-wrapper .comment-form input:focus,
.single-blog-wrapper .comment-form textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
outline: none;
box-shadow: 0 0 15px rgba(36, 36, 225, 0.1);
}
.single-blog-wrapper .comment-form-comment label {
display: block;
margin-bottom: 8px;
color: #333;
}
.single-blog-wrapper .form-submit {
margin-top: 10px;
}
.single-blog-wrapper .form-submit .submit {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1) 0%,
rgba(11, 205, 240, 1) 100%
);
color: white;
border: none;
padding: 12px 30px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s ease;
}
.single-blog-wrapper .form-submit .submit:hover {
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
gap: 15px;
}
.featured-image {
height: 300px;
}
.inline-lead-form {
padding: 20px;
}
.comments-section {
padding: 25px;
}
}
/* Call to Action Sections */
.single-blog-wrapper .content-cta {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.05) 0%,
rgba(11, 205, 240, 0.05) 100%
);
padding: 40px;
border-radius: 15px;
text-align: center;
margin: 40px 0;
}
.single-blog-wrapper .content-cta h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #333;
}
.single-blog-wrapper .content-cta p {
color: #666;
margin-bottom: 25px;
}
.single-blog-wrapper .cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1) 0%,
rgba(11, 205, 240, 1) 100%
);
color: white;
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 500;
transition: transform 0.3s ease;
}
.single-blog-wrapper .cta-button:hover {
transform: translateY(-3px);
}
/* Popup Form */
.single-blog-wrapper .popup-form {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
justify-content: center;
align-items: center;
}
.single-blog-wrapper .popup-form.active {
display: flex;
}
.single-blog-wrapper .popup-content {
background: white;
padding: 40px;
border-radius: 15px;
width: 90%;
max-width: 500px;
position: relative;
}
.single-blog-wrapper .close-popup {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
}
/* Featured Image and Form Layout */
.single-blog-wrapper .featured-content-wrap {
margin: -30px auto 40px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: grid;
grid-template-columns: 1.5fr 1fr; /* Changed from 1.2fr to 1.5fr for image */
gap: 0;
min-height: 500px; /* Reduced from 600px */
}
.single-blog-wrapper .featured-image {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.single-blog-wrapper .featured-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
display: block;
}
/* Inline Lead Form */
.single-blog-wrapper .inline-lead-form {
padding: 35px 30px; /* Reduced padding */
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
display: flex;
flex-direction: column;
justify-content: center;
height: 100%; /* Reduced from 600px */
position: relative;
}
.single-blog-wrapper .inline-lead-form h3 {
text-align: center;
margin-bottom: 20px; /* Reduced from 30px */
color: #333;
font-size: 1.5rem; /* Reduced from 1.8rem */
position: relative;
padding-bottom: 15px; /* Reduced from 20px */
}
.single-blog-wrapper .form-row {
display: grid;
grid-template-columns: 1fr;
gap: 15px; /* Reduced from 20px */
margin-bottom: 15px; /* Reduced from 20px */
}
.single-blog-wrapper .lead-form-group input,
.single-blog-wrapper .lead-form-group select,
.single-blog-wrapper .lead-form-group textarea {
padding: 12px 15px; /* Reduced from 15px 20px */
font-size: 0.95rem;
}
.single-blog-wrapper .lead-form-group textarea {
height: 100px; /* Fixed height for textarea */
resize: none;
}
.single-blog-wrapper .lead-form-submit {
padding: 14px; /* Reduced from 18px */
font-size: 1rem; /* Reduced from 1.1rem */
margin-top: 15px; /* Reduced from 20px */
}
/* Responsive Design */
@media (max-width: 1200px) {
.single-blog-wrapper .featured-content-wrap,
.single-blog-wrapper .featured-image,
.single-blog-wrapper .inline-lead-form {
min-height: 450px; /* Further reduced for larger screens */
}
}
@media (max-width: 992px) {
.single-blog-wrapper .featured-content-wrap {
grid-template-columns: 1fr;
min-height: auto;
max-width: 600px; /* Added max-width for tablet view */
}
.single-blog-wrapper .featured-image {
height: 350px; /* Reduced from 400px */
min-height: auto;
}
.single-blog-wrapper .inline-lead-form {
min-height: auto;
padding: 30px 25px;
}
}
@media (max-width: 768px) {
.single-blog-wrapper .featured-content-wrap {
margin: -30px auto 40px;
max-width: 100%; /* Full width on mobile */
}
.single-blog-wrapper .featured-image {
height: 250px; /* Reduced from 300px */
}
.single-blog-wrapper .inline-lead-form {
padding: 25px 20px;
}
}
/* Mid-Content CTA Styles */
.single-blog-wrapper .mid-content-cta {
margin: 40px -40px;
padding: 60px 40px;
position: relative;
overflow: hidden;
background: #f8f9fa;
border-radius: 20px;
}
.single-blog-wrapper .cta-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.03) 0%,
rgba(11, 205, 240, 0.03) 100%
);
z-index: 1;
}
.single-blog-wrapper .cta-background::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.8) 0%,
transparent 50%
);
animation: rotate 30s linear infinite;
}
.single-blog-wrapper .cta-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
align-items: center;
}
.single-blog-wrapper .cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #000;
padding: 8px 16px;
border-radius: 30px;
margin-bottom: 20px;
color: #fff;
font-weight: 500;
font-size: 0.9rem;
}
.single-blog-wrapper .cta-badge i {
color: #ffd700;
}
.single-blog-wrapper .mid-content-cta h3 {
font-size: 2.2rem;
color: #333;
margin-bottom: 15px;
line-height: 1.3;
background: #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.single-blog-wrapper .mid-content-cta p {
color: #666;
font-size: 1.1rem;
margin-bottom: 25px;
line-height: 1.6;
}
.single-blog-wrapper .cta-features {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.single-blog-wrapper .cta-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: #555;
font-size: 1.05rem;
}
.single-blog-wrapper .cta-features i {
color: #000;
font-size: 1.2rem;
}
.single-blog-wrapper .cta-buttons {
display: flex;
gap: 20px;
margin-top: 30px;
}
.single-blog-wrapper .primary-cta {
padding: 15px 30px;
border-radius: 40px;
background: #000;
color: white;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.2);
}
.single-blog-wrapper .btn-icon {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.single-blog-wrapper .primary-cta:hover .btn-icon {
transform: translateX(5px);
}
.single-blog-wrapper .secondary-cta {
padding: 15px 30px;
border-radius: 40px;
background: white;
color: #000;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
border: 2px solid rgba(36, 36, 225, 0.1);
}
.single-blog-wrapper .cta-right {
position: relative;
}
.single-blog-wrapper .cta-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.single-blog-wrapper .stat-item {
text-align: center;
}
.single-blog-wrapper .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #00664f;
margin-bottom: 5px;
background:#000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.single-blog-wrapper .stat-label {
color: #666;
font-size: 0.9rem;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Responsive Design */
@media (max-width: 992px) {
.single-blog-wrapper .cta-content {
grid-template-columns: 1fr;
gap: 30px;
}
.single-blog-wrapper .mid-content-cta h3 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.single-blog-wrapper .mid-content-cta {
margin: 30px -20px;
padding: 40px 20px;
}
.single-blog-wrapper .cta-buttons {
flex-direction: column;
}
.single-blog-wrapper .primary-cta,
.single-blog-wrapper .secondary-cta {
width: 100%;
justify-content: center;
text-decoration: none;
}
}
/* FAQ Section Styles */
.single-blog-wrapper .blog-faq-section {
margin: 60px 0;
padding: 40px;
background: white;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.single-blog-wrapper .faq-header {
text-align: center;
margin-bottom: 40px;
}
.single-blog-wrapper .faq-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.1) 0%,
rgba(11, 205, 240, 0.1) 100%
);
color:#00664f;
border-radius: 30px;
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 15px;
}
.single-blog-wrapper .faq-header h2 {
font-size: 2rem;
color: #333;
margin-bottom: 15px;
background: linear-gradient(
135deg,
#00664f 0%,
#0D289 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.single-blog-wrapper .faq-header p {
color: #666;
font-size: 1.1rem;
}
.single-blog-wrapper .faq-container {
max-width: 800px;
margin: 0 auto;
}
.single-blog-wrapper .faq-item {
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.single-blog-wrapper .faq-item:hover {
border-color: rgba(36, 36, 225, 0.2);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.single-blog-wrapper .faq-question {
width: 100%;
padding: 20px 25px;
background: white;
border: none;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.single-blog-wrapper .faq-question span {
font-size: 1.1rem;
font-weight: 500;
color: #333;
}
.single-blog-wrapper .faq-question i {
color: rgba(36, 36, 225, 1);
transition: transform 0.3s ease;
}
.single-blog-wrapper .faq-item.active .faq-question {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.03) 0%,
rgba(11, 205, 240, 0.03) 100%
);
}
.single-blog-wrapper .faq-item.active .faq-question i {
transform: rotate(180deg);
}
.single-blog-wrapper .faq-answer {
padding: 0;
height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.single-blog-wrapper .faq-item.active .faq-answer {
padding: 20px 25px;
height: auto;
border-top: 1px solid #eee;
}
.single-blog-wrapper .faq-answer p {
color: #666;
line-height: 1.6;
margin: 0;
}
.single-blog-wrapper .faq-cta {
text-align: center;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #eee;
}
.single-blog-wrapper .faq-cta p {
color: #666;
margin-bottom: 15px;
}
.single-blog-wrapper .faq-contact-btn {
background: linear-gradient(
135deg,
rgba(36, 36, 225, 1) 0%,
rgba(11, 205, 240, 1) 100%
);
color: white;
border: none;
padding: 15px 30px;
border-radius: 30px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}
.single-blog-wrapper .faq-contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.2);
}
/* Client Section Styles */
.home-clients-section {
padding: 80px 0;
background: linear-gradient(
135deg,
rgba(36, 36, 225, 0.02) 0%,
rgba(11, 205, 240, 0.02) 100%
);
overflow: hidden;
}
.home-clients-section .section-header {
text-align: center;
margin-bottom: 50px;
}
.home-clients-section .section-badge {
display: inline-block;
padding: 8px 20px;
background:var(--gradient);
color: #FFFFFF;
border-radius: 30px;
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 15px;
}
.home-clients-section .section-header h2 {
font-size: 2.5rem;
color: #333;
margin-bottom: 15px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-clients-section .section-header p {
color: #666;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.home-clients-section .client-slider-container {
position: relative;
padding: 20px 0;
}
.home-clients-section .home-clients-section .client-slider {
overflow: hidden;
position: relative;
width: 100%;
}
.home-clients-section .client-track {
display: flex;
animation: slideTrack 30s linear infinite;
}
.home-clients-section .client-slide {
flex: 0 0 200px;
padding: 0 20px;
}
.home-clients-section .client-logo {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
.home-clients-section .client-logo:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.home-clients-section .client-logo img {
max-width: 100%;
max-height: 60px;
object-fit: contain;
transition: all 0.3s ease;
}
.home-clients-section .client-logo:hover img {
opacity: 1;
}
@keyframes slideTrack {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Pause animation on hover */
.home-clients-section .client-slider:hover .client-track {
animation-play-state: paused;
}
/* Responsive Design */
@media (max-width: 768px) {
.home-clients-section {
padding: 60px 0;
}
.home-clients-section .section-header h2 {
font-size: 2rem;
}
.home-clients-section .client-slide {
flex: 0 0 150px;
padding: 0 15px;
}
.home-clients-section .client-logo {
height: 80px;
padding: 15px;
}
.home-clients-section .client-logo img {
max-height: 50px;
}
}
/* Keywords Section Styles */
.keywords-section {
background: linear-gradient(
90deg,
rgba(36, 36, 225, 0.03) 35%,
rgba(11, 205, 240, 0.03) 100%
);
padding: 40px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.keywords-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.keyword-category {
padding: 20px;
}
.keyword-category h4 {
color: white;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
position: relative;
padding-bottom: 10px;
}
.keyword-category h4::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: white;
}
.keyword-category ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.keyword-category ul li {
margin-bottom: 5px;
}
.keyword-category ul li a {
color: #333;
font-size: 14px;
text-decoration: none;
padding: 4px 0;
border-radius: 15px;
display: inline-block;
transition: all 0.3s ease;
border: 1px solid rgba(36, 36, 225, 0.1);
color: white;
}
.keyword-category ul li:not(:last-child) a:after {
content: "|";
margin-left: 5px;
}
/* Responsive Design */
@media (max-width: 992px) {
.keywords-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.keywords-wrapper {
grid-template-columns: 1fr;
}
.keyword-category {
padding: 15px;
}
}
.keyword-divider {
width: 100%;
height: 1px;
background: white;
margin: 0 20px;
}
/* Custom Content Section Styles */
.home-page-custom-content-section {
padding: 50px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
margin: 50px 0;
position: relative;
overflow: hidden;
}
.home-page-custom-content-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
circle at 50% 50%,
rgba(36, 36, 225, 0.03) 0%,
transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}
.home-page-custom-content-section .custom-content-wrapper {
max-width: 1400px;
margin: 0 auto;
height: 500px;
overflow-y: auto;
padding: 40px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(36, 36, 225, 0.1),
inset 0 -3px 0 rgba(36, 36, 225, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(36, 36, 225, 0.1);
transition: all 0.3s ease;
position: relative;
}
.home-page-custom-content-section .custom-content-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(36, 36, 225, 0.15),
inset 0 -3px 0 rgba(36, 36, 225, 0.2);
}
/* Gradient Border Effect */
.home-page-custom-content-section .custom-content-wrapper::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background:linear-gradient(45deg, #0000001c );
border-radius: 22px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.home-page-custom-content-section .custom-content-wrapper:hover::before {
opacity: 1;
}
/* Custom Scrollbar */
.home-page-custom-content-section .custom-content-wrapper::-webkit-scrollbar {
width: 8px;
}
.home-page-custom-content-section
.custom-content-wrapper::-webkit-scrollbar-track {
background: rgba(36, 36, 225, 0.05);
border-radius: 10px;
}
.home-page-custom-content-section
.custom-content-wrapper::-webkit-scrollbar-thumb {
background: #000;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.8);
}
.home-page-custom-content-section
.custom-content-wrapper::-webkit-scrollbar-thumb:hover {
background: #000;
}
/* Content Styling */
.home-page-custom-content-section .custom-content-wrapper h1,
.home-page-custom-content-section .custom-content-wrapper h2,
.home-page-custom-content-section .custom-content-wrapper h3,
.home-page-custom-content-section .custom-content-wrapper h4 {
color: #000000;
font-weight: 700;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.home-page-custom-content-section .custom-content-wrapper h2 {
font-size: 2.5em;
background: linear-gradient(90deg, #000000, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-page-custom-content-section .custom-content-wrapper h3 {
font-size: 1.8em;
margin-top: 30px;
}
.home-page-custom-content-section .custom-content-wrapper h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #000000, #000000);
border-radius: 3px;
}
.home-page-custom-content-section .custom-content-wrapper p {
color: #444;
line-height: 1.8;
margin-bottom: 20px;
font-size: 1.1em;
transition: all 0.3s ease;
}
.home-page-custom-content-section .custom-content-wrapper ul,
.home-page-custom-content-section .custom-content-wrapper ol {
margin: 20px 0;
padding-left: 20px;
}
.home-page-custom-content-section .custom-content-wrapper li {
color: #444;
margin-bottom: 12px;
position: relative;
padding-left: 25px;
line-height: 1.6;
}
.home-page-custom-content-section .custom-content-wrapper ul li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
transition: all 0.3s ease;
}
.home-page-custom-content-section .custom-content-wrapper ul li:hover::before {
transform: scale(1.5);
}
.home-page-custom-content-section .custom-content-wrapper ol {
counter-reset: item;
list-style: none;
}
.home-page-custom-content-section .custom-content-wrapper ol li {
counter-increment: item;
}
.home-page-custom-content-section .custom-content-wrapper ol li::before {
content: counter(item);
position: absolute;
left: -5px;
top: 0;
font-weight: 600;
color: #000;
font-size: 0.9em;
}
.home-page-custom-content-section .custom-content-wrapper a {
color: #000;
text-decoration: none;
position: relative;
padding-bottom: 2px;
transition: all 0.3s ease;
}
.home-page-custom-content-section .custom-content-wrapper a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, #000, #000);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.home-page-custom-content-section .custom-content-wrapper a:hover {
color: #000;
}
.home-page-custom-content-section .custom-content-wrapper a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Animation */
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
/* Responsive Design */
@media (max-width: 1440px) {
.home-page-custom-content-section .custom-content-wrapper {
max-width: 1200px;
margin: 0 20px;
}
}
@media (max-width: 768px) {
.home-page-custom-content-section .custom-content-wrapper {
height: 400px;
padding: 30px;
}
.home-page-custom-content-section .custom-content-wrapper h2 {
font-size: 2em;
}
.home-page-custom-content-section .custom-content-wrapper h3 {
font-size: 1.5em;
}
}
.carousel-section {
width: 100%;
padding: 60px 20px;
background: #ffffff;
position: relative;
overflow: hidden;
}
.carousel-section .section-title {
text-align: center;
position: relative;
z-index: 10;
}
.carousel-section .section-title h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.carousel-section .section-title p {
font-size: 1.2rem;
color: #666;
margin-bottom: 20px;
letter-spacing: 1px;
}
.carousel-section .title-decoration {
width: 80px;
height: 4px;
background: #000;
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.carousel-section .carousel-container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
position: relative;
}
.carousel-section .carousel-row {
width: 100%;
overflow: hidden;
margin: 50px 0;
position: relative;
padding: 10px 0;
}
.carousel-section .carousel-track {
display: flex;
width: fit-content;
gap: 30px;
}
.carousel-section .carousel-slide {
width: 300px;
height: 200px;
flex-shrink: 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.carousel-section .carousel-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 1;
}
.carousel-section .carousel-slide:hover {
transform: translateY(-15px) rotateY(5deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.carousel-section .carousel-slide:hover::before {
opacity: 1;
}
.carousel-section .carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
filter: brightness(0.95);
position: absolute;
top: 0;
left: 0;
}
.carousel-section .carousel-slide:hover img {
transform: scale(1.15);
filter: brightness(1.05);
}
/* Top row animation (left to right) */
.carousel-section .top-row .carousel-track {
animation: scrollLeft 40s linear infinite;
}
/* Bottom row animation (right to left) */
.carousel-section .bottom-row .carousel-track {
animation: scrollRight 40s linear infinite;
}
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-300px * 5 - 30px * 5));
}
}
@keyframes scrollRight {
0% {
transform: translateX(calc(-300px * 5 - 30px * 5));
}
100% {
transform: translateX(0);
}
}
/* Pause animation on hover */
.carousel-section .carousel-track:hover {
animation-play-state: paused;
}
/* Add decorative elements */
.carousel-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 50%);
opacity: 0.7;
z-index: 0;
}
/* Add gradient overlay for smooth edges */
.carousel-section .carousel-container::before,
.carousel-section .carousel-container::after {
content: '';
position: absolute;
top: 0;
width: 200px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.carousel-section .carousel-container::before {
left: 0;
background: linear-gradient(to right, #ffffff, transparent);
}
.carousel-section .carousel-container::after {
right: 0;
background: linear-gradient(to left, #ffffff, transparent);
}
/* Add floating particles */
.carousel-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: 
radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
radial-gradient(circle at 40% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
radial-gradient(circle at 60% 20%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
radial-gradient(circle at 30% 80%, rgba(0, 0, 0, 0.05) 0%, transparent 8%);
background-size: 100px 100px;
background-position: 0 0, 50px 50px, 100px 100px, 150px 150px, 200px 200px;
animation: floatParticles 20s linear infinite;
z-index: 1;
}
@keyframes floatParticles {
0% {
background-position: 0 0, 50px 50px, 100px 100px, 150px 150px, 200px 200px;
}
100% {
background-position: 100px 100px, 150px 150px, 200px 200px, 250px 250px, 300px 300px;
}
}
/* Responsive Design */
@media (max-width: 1600px) {
.carousel-section .carousel-slide {
width: 250px;
height: 167px;
}
.carousel-section .section-title h1 {
font-size: 3rem;
}
}
@media (max-width: 1200px) {
.carousel-section .carousel-slide {
width: 200px;
height: 133px;
}
.carousel-section .section-title h1 {
font-size: 2.5rem;
}
.carousel-section .section-title p {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.carousel-section .carousel-slide {
width: 150px;
height: 100px;
}
.carousel-section .carousel-container {
padding: 10px;
}
.carousel-section .carousel-row {
margin: 30px 0;
}
.carousel-section .section-title h1 {
font-size: 2rem;
}
.carousel-section .section-title p {
font-size: 0.9rem;
}
} 
/* Enhanced Tabbed Section */
.tabbed-section {
max-width: 1200px;
margin: 60px auto;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.08);
display: flex;
overflow: hidden;
min-height: 600px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 1px solid rgba(0,0,0,0.05);
}
.tabbed-section:hover {
box-shadow: 0 30px 80px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.tab-list {
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
display: flex;
flex-direction: column;
min-width: 280px;
padding: 40px 0;
gap: 8px;
box-shadow: 4px 0 20px rgba(0,0,0,0.1);
z-index: 2;
position: relative;
}
.tab-list::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.tab-btn {
background: none;
border: none;
color: #ffffff;
padding: 20px 32px;
text-align: left;
font-size: 1.1rem;
cursor: pointer;
border-left: 4px solid transparent;
border-radius: 0 20px 20px 0;
font-weight: 500;
letter-spacing: 0.3px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
position: relative;
z-index: 1;
margin: 0 8px 0 0;
display: flex;
align-items: center;
gap: 12px;
}
.tab-btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: white;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.tab-btn:hover {
color: #ffffff;
transform: translateX(4px);
}
.tab-btn.active {
background: white;
color: black;
border-left: 4px solid white;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0,123,255,0.3);
transform: translateX(4px);
}
.tab-btn.active::before {
width: 100%;
}
.tab-btn i {
font-size: 1.2rem;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.tab-btn:hover i,
.tab-btn.active i {
opacity: 1;
}
.tab-content {
flex: 1;
padding: 48px 56px;
background: #ffffff;
display: flex;
align-items: flex-start;
justify-content: center;
min-width: 0;
position: relative;
overflow: hidden;
}
.tab-panel {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 40px;
opacity: 0;
pointer-events: none;
position: absolute;
width: 100%;
left: 0;
top: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
transform: translateY(20px);
}
.tab-panel.active {
display: flex;
opacity: 1;
pointer-events: auto;
position: relative;
z-index: 2;
transform: translateY(0);
animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInUp {
from { 
opacity: 0; 
transform: translateY(30px);
}
to { 
opacity: 1; 
transform: translateY(0);
}
}
.tab-img {
width: 100%;
max-width: 500px;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.1);
object-fit: cover;
background: #f8f9fa;
border: 2px solid #e9ecef;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: 8px;
height: 280px;
}
.tab-img:hover {
transform: scale(1.02);
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.tab-info {
flex: 1;
min-width: 100%;
max-width: 600px;
color: #2c3e50;
}
.tab-info h2 {
font-size: 2.2rem;
margin: 0 0 20px 0;
color: #1a1a1a;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.2;
background: linear-gradient(135deg, #1a1a1a, #007bff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tab-info h3 {
font-size: 1.4rem;
margin: 32px 0 16px 0;
color: #2c3e50;
font-weight: 600;
position: relative;
}
.tab-info h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #007bff, #0056b3);
border-radius: 2px;
}
.tab-info p {
font-size: 1.1rem;
color: #5a6c7d;
margin-bottom: 20px;
line-height: 1.7;
font-weight: 400;
}
.tab-info ul, .tab-info ol {
margin: 0 0 20px 24px;
color: #5a6c7d;
font-size: 1.05rem;
line-height: 1.7;
}
.tab-info ul li, .tab-info ol li {
margin-bottom: 8px;
position: relative;
}
.tab-info ul li::before {
content: '✓';
position: absolute;
left: -20px;
color: #007bff;
font-weight: bold;
}
.tab-info b {
color: #1a1a1a;
font-weight: 600;
}
.tab-info blockquote {
border-left: 4px solid #007bff;
margin: 24px 0;
padding: 16px 24px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
font-style: italic;
color: #5a6c7d;
border-radius: 8px;
position: relative;
}
.tab-info blockquote::before {
content: '"';
position: absolute;
top: 8px;
left: 8px;
font-size: 2rem;
color: #007bff;
opacity: 0.3;
}
.tab-info .highlight {
background: black;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
display: inline-block;
margin-bottom: 12px;
font-size: 0.95rem;
box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}
/* Mobile Responsive Design */
@media (max-width: 1200px) {
.tabbed-section {
max-width: 95vw;
margin: 40px auto;
border-radius: 20px;
}
.tab-content {
padding: 32px 40px;
}
.tab-img {
max-width: 400px;
height: 240px;
}
.tab-info h2 {
font-size: 1.9rem;
}
}
@media (max-width: 900px) {
.tabbed-section {
flex-direction: column !important;
min-height: auto;
border-radius: 16px;
margin: 30px auto;
}
.tab-list {
flex-direction: row;
min-width: 0;
width: 100%;
padding: 16px;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: thin;
scrollbar-color: #007bff #2d2d2d;
-webkit-overflow-scrolling: touch;
background: linear-gradient(90deg, #1a1a1a 0%, #2d2d2d 100%);
}
.tab-btn {
flex: 1 0 auto;
text-align: center;
border-left: none;
border-bottom: 3px solid transparent;
border-radius: 12px;
padding: 16px 20px;
min-width: 140px;
white-space: normal;
font-size: 1rem;
margin: 0 4px;
justify-content: center;
}
.tab-btn.active,
.tab-btn:hover {
border-left: none;
border-bottom: 3px solid black;
background:white;
color:black;
transform: translateY(-2px);
}
.tab-btn::before {
display: none;
}
.tab-content {
padding: 32px 24px;
}
.tab-panel {
gap: 24px;
}
.tab-img {
width: 100%;
max-width: 100%;
height: 200px;
}
.tab-info h2 {
font-size: 1.7rem;
}
.tab-info h3 {
font-size: 1.3rem;
}
.tab-info p {
font-size: 1rem;
}
}
/* Custom scrollbar for mobile tab-list */
.tab-list::-webkit-scrollbar {
height: 6px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
.tab-list::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #007bff, #0056b3);
border-radius: 3px;
}
.tab-list::-webkit-scrollbar-thumb:hover {
background: linear-gradient(90deg, #0056b3, #004085);
}
@media (max-width: 700px) {
.tabbed-section {
margin: 20px auto;
border-radius: 12px;
}
.tab-content {
padding: 24px 16px;
}
.tab-panel {
flex-direction: column;
gap: 20px;
}
.tab-img {
width: 100%;
max-width: 100vw;
height: 180px;
border-radius: 12px;
}
.tab-info h2 {
font-size: 1.5rem;
margin-bottom: 16px;
}
.tab-info h3 {
font-size: 1.2rem;
margin: 24px 0 12px 0;
}
.tab-info p {
font-size: 0.95rem;
margin-bottom: 16px;
}
.tab-info ul, .tab-info ol {
font-size: 0.95rem;
margin-bottom: 16px;
}
.tab-btn {
padding: 12px 16px;
min-width: 120px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.tabbed-section {
margin: 15px auto;
border-radius: 8px;
}
.tab-list {
padding: 12px;
gap: 6px;
}
.tab-btn {
padding: 10px 12px;
min-width: 100px;
font-size: 0.85rem;
border-radius: 8px;
}
.tab-content {
padding: 20px 12px;
}
.tab-img {
height: 160px;
border-radius: 8px;
}
.tab-info h2 {
font-size: 1.3rem;
}
.tab-info h3 {
font-size: 1.1rem;
}
.tab-info p {
font-size: 0.9rem;
}
}
/* Enhanced animations for better UX */
.tab-btn {
position: relative;
overflow: hidden;
}
.tab-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.tab-btn:active::after {
width: 200px;
height: 200px;
}
/* Loading animation for tab content */
.tab-panel.loading {
opacity: 0.7;
pointer-events: none;
}
.tab-panel.loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border: 3px solid #f3f3f3;
border-top: 3px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Ripple effect for tab buttons */
.tab-btn .ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
/* Hover state for desktop */
.tab-btn.hover {
transform: translateX(6px);
box-shadow: 0 6px 20px rgba(0,123,255,0.2);
}
/* Focus states for accessibility */
.tab-btn:focus {
outline: 2px solid black;
outline-offset: 2px;
}
/* Smooth transitions for all interactive elements */
.tab-btn,
.tab-panel,
.tab-img,
.tab-info h2,
.tab-info h3 {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Enhanced mobile experience */
@media (max-width: 900px) {
.tab-btn:active {
transform: scale(0.95);
}
.tab-list {
scroll-behavior: smooth;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.tab-btn {
border: 2px solid #ffffff;
}
.tab-btn.active {
border: 2px solid #007bff;
}
.tab-info h2 {
-webkit-text-fill-color: #000000;
background: none;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.tab-btn,
.tab-panel,
.tab-img,
.tab-info h2,
.tab-info h3 {
transition: none;
}
.tab-panel.active {
animation: none;
}
.tab-btn .ripple {
animation: none;
}
}
.service-portfolio-section {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.service-portfolio-section .portfolio-header {
text-align: center;
margin-bottom: 60px;
color: #1a1a1a;
}
.service-portfolio-section .portfolio-header h1 {
font-size: 2.5rem;
margin-bottom: 15px;
font-weight: 700;
background: #333;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -1px;
position: relative;
}
.service-portfolio-section .portfolio-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 35px;
margin-bottom: 60px;
}
.service-portfolio-section .project-card {
background: #ffffff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
border: 1px solid #f0f0f0;
position: relative;
}
.service-portfolio-section .project-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
border-color: #e0e0e0;
}
.service-portfolio-section .card-image-container {
position: relative;
height: 420px;
overflow: hidden;
background: #f8f9fa;
}
.service-portfolio-section .website-screenshot {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.service-portfolio-section .website-screenshot img {
width: 100%;
height: auto;
min-height: 100%;
object-fit: cover;
object-position: top;
transition: transform 15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: translateY(0);
filter: brightness(0.98);
}
/* Auto-scroll effect on hover - from top to bottom */
.service-portfolio-section .project-card:hover .website-screenshot img {
transform: translateY(calc(-100% + 420px));
filter: brightness(1.02);
}
.service-portfolio-section .card-content {
padding: 25px;
text-align: center;
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}
.service-portfolio-section .view-project-btn {
background: black;
color: white;
border: none;
padding: 14px 28px;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.service-portfolio-section .view-project-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;
}
.service-portfolio-section .view-project-btn:hover::before {
left: 100%;
}
.service-portfolio-section .view-project-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
/* Enhanced hover effects */
.service-portfolio-section .project-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
border-radius: 20px;
}
.service-portfolio-section .project-card:hover::after {
opacity: 1;
}
/* Smooth scroll animation for images - improved */
@keyframes smoothScrollTopToBottom {
0% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-100% + 420px));
}
}
.service-portfolio-section .project-card:hover .website-screenshot img {
animation: smoothScrollTopToBottom 8s ease-in-out infinite;
}
/* Loading animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.service-portfolio-section .project-card {
animation: fadeInUp 0.6s ease-out forwards;
}
.service-portfolio-section .project-card:nth-child(1) { animation-delay: 0.1s; }
.service-portfolio-section .project-card:nth-child(2) { animation-delay: 0.2s; }
.service-portfolio-section .project-card:nth-child(3) { animation-delay: 0.3s; }
.service-portfolio-section .project-card:nth-child(4) { animation-delay: 0.4s; }
.service-portfolio-section .project-card:nth-child(5) { animation-delay: 0.5s; }
.service-portfolio-section .project-card:nth-child(6) { animation-delay: 0.6s; }
.service-portfolio-section .project-card:nth-child(7) { animation-delay: 0.7s; }
.service-portfolio-section .project-card:nth-child(8) { animation-delay: 0.8s; }
.service-portfolio-section .project-card:nth-child(9) { animation-delay: 0.9s; }
.service-portfolio-section .project-card:nth-child(10) { animation-delay: 1.0s; }
.service-portfolio-section .project-card:nth-child(11) { animation-delay: 1.1s; }
.service-portfolio-section .project-card:nth-child(12) { animation-delay: 1.2s; }
/* Responsive Design */
@media (max-width: 1400px) {
.service-portfolio-section .portfolio-grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
}
@media (max-width: 1100px) {
.service-portfolio-section .portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.service-portfolio-section .portfolio-header h1 {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.service-portfolio-section .portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.service-portfolio-section .portfolio-header h1 {
font-size: 2.5rem;
}
.service-portfolio-section .portfolio-header p {
font-size: 1.1rem;
}
.service-portfolio-section .card-image-container {
height: 320px;
}
.service-portfolio-section .card-content {
padding: 20px;
}
}
@media (max-width: 600px) {
.service-portfolio-section .portfolio-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.service-portfolio-section .portfolio-header h1 {
font-size: 2.2rem;
}
.service-portfolio-section .portfolio-header p {
font-size: 1rem;
}
.service-portfolio-section .card-image-container {
height: 350px;
}
}
/* Focus states for accessibility */
.service-portfolio-section .project-card:focus-within {
outline: 2px solid #667eea;
outline-offset: 2px;
}
.service-portfolio-section .view-project-btn:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
}
/* Smooth transitions for all interactive elements */
* {
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
/* Author Page - Improved Styles */
.author-page .container {
max-width: 1200px;
margin: 0 auto;
display: flex;
gap: 32px;
padding: 32px 20px;
border-radius: 18px;
}
/* Left Sidebar */
.author-page .sidebar {
width: 290px;
background: #fff;
border-radius: 14px;
padding: 28px 22px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
height: fit-content;
position: sticky;
top: 32px;
transition: box-shadow 0.3s;
}
.author-page .sidebar:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}
.author-page .profile-header {
text-align: center;
margin-bottom: 28px;
}
.author-page .profile-image {
width: 92px;
height: 92px;
border-radius: 50%;
margin: 0 auto 14px;
position: relative;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border: 3px solid #e0f7ef;
transition: box-shadow 0.3s;
}
.author-page .profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.author-page .profile-image:hover img {
transform: scale(1.07) rotate(-2deg);
}
.author-page .verified-badge {
position: absolute;
bottom: 2px;
right: 2px;
width: 22px;
height: 22px;
background: linear-gradient(135deg, #4CAF50 60%, #00D289 100%);
border-radius: 50%;
border: 2.5px solid #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px rgba(76,175,80,0.18);
}
.author-page .profile-name {
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
color: #222;
letter-spacing: 0.01em;
}
.author-page .profile-title {
color: #00a97a;
font-size: 15px;
margin-bottom: 18px;
font-weight: 500;
letter-spacing: 0.01em;
}
.author-page .email-button {
background: linear-gradient(90deg, #00D289 0%, #00664F 100%);
color: #fff;
border: none;
padding: 10px 0;
border-radius: 6px;
width: 100%;
cursor: pointer;
font-size: 15px;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0,210,137,0.08);
transition: background 0.2s, box-shadow 0.2s;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration:none;
}
.author-page .email-button:hover {
background: linear-gradient(90deg, #00664F 0%, #00D289 100%);
box-shadow: 0 4px 16px rgba(0,210,137,0.13);
}
.author-page .section {
margin-bottom: 28px;
}
.author-page .section h3 {
font-size: 15px;
font-weight: 700;
margin-bottom: 10px;
color: #00664F;
letter-spacing: 0.01em;
}
.author-page .section-content {
color: #555;
font-size: 13.5px;
line-height: 1.5;
padding-left: 2px;
}
.author-page .social-links {
display: flex;
flex-direction: row;
gap: 10px;
}
.author-page .social-link {
display: flex;
align-items: center;
gap: 10px;
color: #00a97a;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
padding: 4px 0;
}
.author-page .social-link:hover {
color: #00664F;
text-decoration: underline;
}
.author-page .tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.author-page .tag {
background: linear-gradient(90deg, #e9ecef 60%, #e0f7ef 100%);
color: #00664F;
padding: 5px 12px;
border-radius: 16px;
font-size: 12px;
text-decoration: none;
font-weight: 500;
letter-spacing: 0.01em;
transition: background 0.2s, color 0.2s;
box-shadow: 0 1px 4px rgba(0,210,137,0.04);
}
.author-page .tag:hover {
background: linear-gradient(90deg, #00D289 0%, #00664F 100%);
color: #fff;
}
/* Main Content */
.author-page .main-content {
flex: 1;
min-width: 0;
}
.author-page .about-section {
background: #fff;
border-radius: 14px;
padding: 28px 24px;
margin-bottom: 28px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
transition: box-shadow 0.3s;
}
.author-page .about-section:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.author-page .about-section h2 {
font-size: 22px;
margin-bottom: 16px;
color: #00664F;
font-weight: 700;
letter-spacing: 0.01em;
}
.author-page .about-text {
color: #444;
line-height: 1.7;
font-size: 15px;
letter-spacing: 0.01em;
}
.author-page .articles-section {
background: #fff;
border-radius: 14px;
padding: 28px 24px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
transition: box-shadow 0.3s;
}
.author-page .articles-section:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.author-page .articles-section h2 {
font-size: 22px;
margin-bottom: 24px;
color: #00664F;
font-weight: 700;
letter-spacing: 0.01em;
}
.author-page .articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 28px;
}
.author-page .article-card {
border: none;
border-radius: 16px;
overflow: hidden;
background: #f8fafc;
box-shadow: 0 2px 16px rgba(0,210,137,0.07), 0 1.5px 8px rgba(0,0,0,0.04);
transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s;
display: flex;
flex-direction: column;
min-height: 340px;
position: relative;
}
.author-page .article-card:hover {
transform: translateY(-6px) scale(1.025);
box-shadow: 0 8px 32px rgba(0,210,137,0.13), 0 4px 16px rgba(0,0,0,0.08);
}
.author-page .article-image {
width: 100%;
height: 180px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 32px;
overflow: hidden;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
transition: box-shadow 0.2s;
}

.author-page .article-image a{
	display:inline-block;
	width:100%;
	height:100%;
}


.author-page .article-image img {
width: 100%;
height: 100%;
object-fit: fill !important;
transition: transform 0.3s;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.author-page .article-card:hover .article-image img {
transform: scale(1.06) rotate(-1.5deg);
}
.author-page .article-content {
padding: 18px 16px 16px 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.author-page .article-title {
font-size: 17px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.4;
color: #222;
letter-spacing: 0.01em;
transition: color 0.2s;
}
.author-page .article-title a {
color: inherit;
text-decoration: none;
transition: color 0.2s;
}
.author-page .article-title a:hover {
color: #00D289;
text-decoration: underline;
}
.author-page .article-excerpt {
font-size: 13.5px;
color: #555;
line-height: 1.6;
margin-bottom: 14px;
flex: 1;
transition: color 0.2s;
}
.author-page .article-meta {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 12px;
color: #00a97a;
gap: 16px;
margin-top: 2px;
font-weight: 500;
}
.author-page .article-stats {
display: flex;
gap: 12px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.author-page .container {
flex-direction: column;
padding: 18px 6px;
gap: 18px;
}
.author-page .sidebar {
width: 100%;
position: static;
margin-bottom: 18px;
}
.author-page .articles-grid {
grid-template-columns: 1fr 1fr;
gap: 18px;
}
}
@media (max-width: 768px) {
.author-page .container {
flex-direction: column;
padding: 10px 2px;
gap: 12px;
}
.author-page .sidebar {
width: 100%;
position: static;
margin-bottom: 12px;
}
.author-page .articles-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.author-page .article-image {
height: 140px;
}
}
@media (max-width: 480px) {
.author-page .container {
padding: 2px;
gap: 6px;
}
.author-page .sidebar,
.author-page .about-section,
.author-page .articles-section {
padding: 10px 4px;
border-radius: 8px;
}
.author-page .article-image {
height: 100px;
font-size: 18px;
}
.author-page{
padding: 20px 10px;
}
}
/* Article specific backgrounds */
.author-page .article-card:nth-child(1) .article-image {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.author-page .article-card:nth-child(2) .article-image {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.author-page .article-card:nth-child(3) .article-image {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.author-page .article-card:nth-child(4) .article-image {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.home-services {
padding: 80px 0;
min-height: 100vh;
position: relative;
overflow: hidden;
background: radial-gradient(ellipse at center, #0f1419 0%, #0a0a0a 70%);
}
.home-services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="0.5" fill="%23ffffff" opacity="0.02"/><circle cx="75" cy="75" r="0.3" fill="%23ffffff" opacity="0.01"/><circle cx="50" cy="10" r="0.4" fill="%23ffffff" opacity="0.015"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
pointer-events: none;
z-index: 0;
}
.home-services .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
position: relative;
z-index: 1;
background: 
radial-gradient(circle at 20% 80%, rgba(0, 102, 79, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 210, 137, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(0, 102, 79, 0.05) 0%, transparent 50%);
}
.home-services .home-services__header {
text-align: center;
margin-bottom: 60px;
}
.home-services .home-services__title {
font-size: 48px;
font-weight: 700;
background: linear-gradient(135deg, #00664F 0%, #00D289 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 16px;
line-height: 1.2;
}
.home-services .home-services__description {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.home-services .home-services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 24px;
width: 100%;
}
.home-services .home-services__card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 32px 28px;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
overflow: hidden;
backdrop-filter: blur(10px);
text-decoration: none;
}
.home-services .home-services__card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #00664F 0%, #00D289 100%);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 16px;
z-index: -1;
}
.home-services .home-services__card:hover::before {
opacity: 0.1;
}
.home-services .home-services__card:hover {
transform: translateY(-8px);
border-color: rgba(0, 210, 137, 0.2);
box-shadow: 0 15px 30px rgba(0, 210, 137, 0.08);
}
.home-services .home-services__card .home-services__icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #00664F 0%, #00D289 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition: all 0.3s ease;
}
.home-services .home-services__card .home-services__icon i {
font-size: 24px;
color: #ffffff;
}
.home-services .home-services__card:hover .home-services__icon {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0, 210, 137, 0.15);
}
.home-services .home-services__card .home-services__content h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 12px;
color: #ffffff;
line-height: 1.3;
}
.home-services .home-services__card .home-services__content p {
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin-bottom: 0;
}
.home-services .home-services__card .home-services__arrow {
position: absolute;
top: 28px;
right: 28px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0.6;
}
.home-services .home-services__card .home-services__arrow i {
font-size: 16px;
color: #00D289;
transition: all 0.3s ease;
}
.home-services .home-services__card:hover .home-services__arrow {
opacity: 1;
transform: translate(4px, -4px);
}
.home-services .home-services__card:hover .home-services__arrow i {
color: #ffffff;
}
/* Responsive Design */
@media (max-width: 1024px) {
.home-services .home-services__grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.home-services .home-services__card {
padding: 28px 24px;
}
}
@media (max-width: 768px) {
.home-services {
padding: 60px 0;
}
.home-services .home-services__header {
margin-bottom: 40px;
}
.home-services .home-services__title {
font-size: 36px;
}
.home-services .home-services__description {
font-size: 16px;
}
.home-services .container {
padding: 0 16px;
}
.home-services .home-services__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.home-services .home-services__card {
padding: 24px 20px;
}
.home-services .home-services__content h3 {
font-size: 20px;
}
.home-services .home-services__content p {
font-size: 14px;
}
.home-services .home-services__icon {
width: 48px;
height: 48px;
margin-bottom: 20px;
}
.home-services .home-services__icon i {
font-size: 20px;
}
}
@media (max-width: 480px) {
.home-services {
padding: 40px 0;
}
.home-services .home-services__header {
margin-bottom: 32px;
}
.home-services .home-services__title {
font-size: 28px;
}
.home-services .home-services__description {
font-size: 14px;
}
.home-services .home-services__card {
padding: 20px 16px;
}
.home-services .home-services__content h3 {
font-size: 18px;
margin-bottom: 10px;
}
.home-services .home-services__content p {
font-size: 13px;
}
.home-services .home-services__icon {
width: 44px;
height: 44px;
margin-bottom: 16px;
}
.home-services .home-services__icon i {
font-size: 18px;
}
.home-services .home-services__arrow {
top: 20px;
right: 20px;
width: 28px;
height: 28px;
}
.home-services .home-services__arrow i {
font-size: 14px;
}
}
/* Animation for cards appearing */
.home-services .home-services__card {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(30px);
}
.home-services .home-services__card:nth-child(1) { animation-delay: 0.1s; }
.home-services .home-services__card:nth-child(2) { animation-delay: 0.2s; }
.home-services .home-services__card:nth-child(3) { animation-delay: 0.3s; }
.home-services .home-services__card:nth-child(4) { animation-delay: 0.4s; }
.home-services .home-services__card:nth-child(5) { animation-delay: 0.5s; }
.home-services .home-services__card:nth-child(6) { animation-delay: 0.6s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #00664F 0%, #00D289 100%);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #00D289 0%, #00664F 100%);
}
/* Header Main Styles */
.header {
position: relative;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index: 2000;
transition: all 0.3s ease;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.header.hidden {
transform: translateY(-100%);
}
.header .header__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
}
/* Logo Styles */
.header .header__logo {
flex-shrink: 0;
}
.header .header__logo-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #333333;
font-size: 24px;
font-weight: 700;
transition: all 0.3s ease;
width:200px;
}
.header .header__logo-link:hover {
color: #007B5F;
transform: scale(1.05);
}
.header .header__logo-img {
height: auto;
width: 100%;
transition: all 0.3s ease;
}
.header .header__logo-link:hover .header__logo-img {
transform: scale(1.1);
}
.header .header__logo-text {
font-size: 24px;
font-weight: 700;
color: #007B5F;
}
/* Desktop Navigation */
.header .header__nav {
display: flex;
align-items: center;
}
.header .header__nav-list {
display: flex;
align-items: center;
gap: 12px;
list-style: none;
}
.header .header__nav-item {
position: relative;
}
.header .header__nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
text-decoration: none;
color: #555555;
font-weight: 500;
font-size: 16px;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
}
.header .header__nav-link:hover {
color: #007B5F;
background: rgba(0, 123, 95, 0.1);
transform: translateY(-1px);
}
.header .header__nav-link i {
font-size: 16px;
color: #007B5F;
transition: all 0.3s ease;
}
.header .header__nav-link:hover i {
color: #005A47;
transform: scale(1.1);
}
.header .header__dropdown-icon {
font-size: 12px !important;
margin-left: 6px;
transition: transform 0.3s ease;
}
.header .header__nav-item--dropdown:hover .header__dropdown-icon {
transform: rotate(180deg);
}
/* Desktop Dropdown */
.header .header__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(15px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 8px 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.header .header__dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.header .header__dropdown-link {
display: block;
padding: 14px 24px;
color: #666666;
text-decoration: none;
font-size: 15px;
font-weight: 400;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.header .header__dropdown-link:hover {
color: #007B5F;
background: rgba(0, 123, 95, 0.1);
border-left-color: #007B5F;
padding-left: 28px;
}
/* CTA Button */
.header .header__cta {
flex-shrink: 0;
}
.header .header__cta-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #00D289 0%, #00664F 100%);
color: #ffffff;
text-decoration: none;
font-weight: 600;
font-size: 14px;
border-radius: 25px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 210, 137, 0.3);
}
.header .header__cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 210, 137, 0.4);
background: linear-gradient(135deg, #00664F 0%, #00D289 100%);
}
.header .header__cta-btn i {
font-size: 14px;
transition: transform 0.3s ease;
}
.header .header__cta-btn:hover i {
transform: scale(1.2);
}
/* Mobile Toggle Button */
.header .header__mobile-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: rgba(0, 123, 95, 0.1);
border: 1px solid rgba(0, 123, 95, 0.2);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
gap: 4px;
}
.header .header__mobile-toggle:hover {
background: rgba(0, 123, 95, 0.2);
border-color: rgba(0, 123, 95, 0.4);
}
.header .header__hamburger {
width: 20px;
height: 2px;
background: #007B5F;
transition: all 0.3s ease;
border-radius: 2px;
}
.header .header__mobile-toggle.active .header__hamburger:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.header .header__mobile-toggle.active .header__hamburger:nth-child(2) {
opacity: 0;
}
.header .header__mobile-toggle.active .header__hamburger:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Mobile Menu Overlay */
.header .header__mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
}
.header .header__mobile-overlay.active {
opacity: 1;
visibility: visible;
}
/* Mobile Navigation */
.header .header__mobile-nav {
position: fixed;
top: 0;
left: -100%;
width: 320px;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 1001;
overflow-y: auto;
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
}
.header .header__mobile-nav.active {
left: 0;
}
.header .header__mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.header .header__mobile-logo {
display: flex;
align-items: center;
gap: 12px;
color: #333333;
font-size: 20px;
font-weight: 700;
}
.header .header__mobile-logo-img {
height: 32px;
width: auto;
}
.header .header__mobile-close {
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
color: #333333;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.header .header__mobile-close:hover {
background: rgba(0, 0, 0, 0.2);
transform: rotate(90deg);
}
.header .header__mobile-list {
list-style: none;
padding: 20px 0;
}
.header .header__mobile-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.header .header__mobile-link {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
color: #555555;
text-decoration: none;
font-weight: 500;
font-size: 16px;
transition: all 0.3s ease;
}
.header .header__mobile-link:hover {
color: #007B5F;
background: rgba(0, 123, 95, 0.1);
padding-left: 24px;
}
.header .header__mobile-link i {
font-size: 16px;
color: #007B5F;
width: 20px;
text-align: center;
}
.header .header__mobile-dropdown-icon {
margin-left: auto;
font-size: 12px !important;
transition: transform 0.3s ease;
}
.header .header__mobile-dropdown-icon.active {
transform: rotate(180deg);
}
/* Mobile Dropdown */
.header .header__mobile-dropdown {
list-style: none;
background: rgba(0, 123, 95, 0.05);
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.header .header__mobile-dropdown.active {
max-height: 300px;
}
.header .header__mobile-dropdown-link {
display: block;
padding: 12px 20px 12px 52px;
color: #666666;
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.header .header__mobile-dropdown-link:hover {
color: #007B5F;
background: rgba(0, 123, 95, 0.1);
border-left-color: #007B5F;
padding-left: 56px;
}
/* Mobile CTA */
.header .header__mobile-cta {
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.header .header__mobile-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #00D289 0%, #00664F 100%);
color: #ffffff;
text-decoration: none;
font-weight: 600;
font-size: 16px;
border-radius: 12px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 210, 137, 0.3);
}
.header .header__mobile-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 210, 137, 0.4);
}
/* Responsive Design */
@media (max-width: 1024px) {
.header .header__container {
padding: 0 16px;
}
.header .header__nav-list {
gap: 4px;
}
.header .header__nav-link {
padding: 10px 12px;
font-size: 13px;
}
.header .header__cta-btn {
padding: 10px 20px;
font-size: 13px;
}
}
@media (max-width: 768px) {
.header .header__nav,
.header .header__cta {
display: none;
}
.header .header__mobile-toggle {
display: flex;
}
.header .header__container {
height: 60px;
}
.header .header__logo-link {
font-size: 20px;
}
.header .header__logo-link i {
font-size: 24px;
}
.header .header__logo-text {
font-size: 20px;
}
}
@media (max-width: 480px) {
.header .header__container {
padding: 0 12px;
height: 56px;
}
.header .header__mobile-nav {
width: 280px;
}
.header .header__logo-link {
font-size: 18px;
}
.header .header__logo-link i {
font-size: 20px;
}
.header .header__logo-text {
font-size: 18px;
}
.header .header__mobile-toggle {
width: 36px;
height: 36px;
}
.header .header__hamburger {
width: 18px;
}
}
@media (max-width: 320px) {
.header .header__mobile-nav {
width: 100%;
}
.header .header__container {
padding: 0 8px;
}
}
/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
}
/* Focus states for accessibility */
.header .header__nav-link:focus,
.header .header__mobile-link:focus {
outline: 2px solid rgba(0, 123, 95, 0.5);
outline-offset: 2px;
}
/* Animation for dropdown items */
.header .header__dropdown-link,
.header .header__mobile-dropdown-link {
position: relative;
overflow: hidden;
}
.header .header__dropdown-link::before,
.header .header__mobile-dropdown-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 123, 95, 0.1), transparent);
transition: left 0.5s ease;
}
.header .header__dropdown-link:hover::before,
.header .header__mobile-dropdown-link:hover::before {
left: 100%;
}
/* Loading animation for logo */
@keyframes logoGlow {
0%, 100% {
text-shadow: 0 0 5px rgba(0, 123, 95, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(0, 123, 95, 0.6);
}
}
.header .header__logo-text {
animation: logoGlow 3s ease-in-out infinite;
}