/*========================================================================================================================== NAVBAR ==========================================================================================================================*/ :root { --primary: #16a34a; --primary-dark: #15803d; --secondary: #f59e0b; --text: #1e293b; --text-light: #64748b; --bg: #ffffff; --card: #ffffff; --border: rgba(0, 0, 0, .08); --shadow: 0 10px 30px rgba(0, 0, 0, .08); --radius: 16px; --transition: .35s ease; } /*========================================================================================================================== Dark Theme ============================================================================================================================*/ html[data-theme="dark"] { --primary: #22c55e; --primary-dark: #16a34a; --text: #f8fafc; --text-light: #cbd5e1; --bg: #0f172a; --card: #111827; --border: rgba(255, 255, 255, .08); --shadow: 0 10px 35px rgba(0, 0, 0, .45); } /*========================================================================================================================== Base ============================================================================================================================*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--text); } a { text-decoration: none; } ul { list-style: none; } .container { width: min(1320px, 92%); margin: auto; } /*========================================================================================================================== Header ============================================================================================================================*/ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; transition: .35s; } /* Scroll hone ke baad JS se add hoga */ .header.scrolled { background: rgba(255, 255, 255, .75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } html[data-theme="dark"] .header.scrolled { background: rgba(15, 23, 42, .75); } /*========================================================================================================================== Navbar ============================================================================================================================*/ .navbar { height: 88px; display: flex; align-items: center; justify-content: space-between; } /*========================================================================================================================== Logo ============================================================================================================================*/ .logo { display: flex; align-items: center; gap: 14px; } .logo img { width: 52px; height: 52px; object-fit: contain; } .logo-text { display: flex; flex-direction: column; } .company-name { color: var(--text); font-size: 1.35rem; font-weight: 700; } .company-name span { color: var(--primary); } .logo-text small { color: var(--text-light); font-size: .72rem; } /*========================================================================================================================== Desktop Menu ============================================================================================================================*/ .nav-menu { display: flex; align-items: center; gap: 34px; } .nav-item { position: relative; } .nav-link { color: var(--text); font-weight: 500; transition: var(--transition); position: relative; } /* Underline Animation */ .nav-link::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; background: var(--primary); transition: .35s; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover { color: var(--primary); } /*========================================================================================================================== Dropdown ============================================================================================================================*/ .dropdown { position: relative; } .dropdown>a { display: flex; align-items: center; gap: 6px; } .dropdown-menu { position: absolute; top: 140%; left: 0; width: 240px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 0; opacity: 0; visibility: hidden; transform: translateY(15px); transition: .3s; border: 1px solid var(--border); } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu a { display: block; padding: 12px 20px; color: var(--text); transition: .3s; } .dropdown-menu a:hover { color: var(--primary); background: rgba(22, 163, 74, .08); } /*========================================================================================================================== Right Actions ============================================================================================================================*/ .nav-actions { display: flex; align-items: center; gap: 15px; } /*========================================================================================================================== Theme Button ============================================================================================================================*/ .theme-toggle { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--card); color: var(--text); box-shadow: var(--shadow); transition: .3s; position: relative; } .theme-toggle:hover { transform: rotate(180deg); } .sun-icon { display: none; } html[data-theme="dark"] .moon-icon { display: none; } html[data-theme="dark"] .sun-icon { display: inline-block; } /*========================================================================================================================== CTA Button ============================================================================================================================*/ .quote-btn { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; padding: 14px 26px; border-radius: 50px; font-weight: 600; display: flex; align-items: center; gap: 10px; transition: .3s; } .quote-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(22, 163, 74, .35); } /*========================================================================================================================== Hamburger ============================================================================================================================*/ .hamburger { display: none; width: 45px; height: 45px; border: none; background: none; cursor: pointer; } .hamburger span { display: block; width: 28px; height: 3px; background: var(--text); margin: 6px auto; border-radius: 50px; transition: .3s; } /*========================================================================================================================== Mobile Nav ============================================================================================================================*/ .mobile-nav { position: fixed; top: 0; right: -100%; width: 330px; max-width: 90%; height: 100vh; background: var(--card); z-index: 1001; transition: .4s; display: flex; flex-direction: column; box-shadow: -5px 0 25px rgba(0, 0, 0, .15); } .mobile-nav.active { right: 0; } .mobile-nav-header { padding: 22px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } .mobile-logo { display: flex; align-items: center; gap: 12px; } .mobile-logo img { width: 45px; } .close-menu { border: none; background: none; font-size: 1.5rem; cursor: pointer; color: var(--text); } .mobile-menu { padding: 20px; flex: 1; } .mobile-link, .mobile-dropdown-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; color: var(--text); border: none; background: none; font-size: 1rem; cursor: pointer; border-bottom: 1px solid var(--border); } .mobile-submenu { display: none; padding-left: 15px; } .mobile-submenu a { display: block; padding: 10px 0; color: var(--text-light); } .mobile-contact { padding: 25px; border-top: 1px solid var(--border); } .mobile-contact a { display: block; margin-bottom: 14px; color: var(--text); } .mobile-contact i { color: var(--primary); margin-right: 8px; } .mobile-cta { display: block; margin-top: 20px; text-align: center; background: var(--primary); color: #fff !important; padding: 14px; border-radius: 50px; } /*========================================================================================================================== Overlay ============================================================================================================================*/ .menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: .3s; z-index: 1000; } .menu-overlay.active { opacity: 1; visibility: visible; } /*========================================================================================================================== Responsive ============================================================================================================================*/ @media(max-width:991px) { .nav-menu { display: none; } .quote-btn { display: none; } .hamburger { display: block; } } @media(max-width:576px) { .navbar { height: 78px; } .company-name { font-size: 1.1rem; } .logo-text small { display: none; } } /*========================================================================================================================== HERO SECTION - PART 1 ============================================================================================================================*/ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 140px 0 100px; background: var(--bg); } /*========================================================================================================================== Background Shapes ============================================================================================================================*/ .hero-bg-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .15; pointer-events: none; } .shape-1 { width: 320px; height: 320px; background: #22c55e; top: -100px; left: -80px; } .shape-2 { width: 260px; height: 260px; background: #facc15; right: -80px; top: 100px; } .shape-3 { width: 220px; height: 220px; background: #3b82f6; bottom: -80px; left: 45%; } /*========================================================================================================================== Wrapper ============================================================================================================================*/ .hero-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; } /*========================================================================================================================== Left Content ============================================================================================================================*/ .hero-content { position: relative; z-index: 5; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 50px; background: rgba(34, 197, 94, .10); color: var(--primary); font-size: .92rem; font-weight: 600; margin-bottom: 25px; } .hero-badge i { font-size: 18px; } .hero-content h5 { text-transform: uppercase; letter-spacing: 2px; color: var(--primary); font-size: .9rem; margin-bottom: 15px; } .hero-content h1 { font-size: 3.8rem; line-height: 1.2; color: var(--text); font-weight: 800; margin-bottom: 25px; } .hero-content h1 span { background: linear-gradient(90deg, #22c55e, #facc15); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-content p { font-size: 1.05rem; color: var(--text-light); line-height: 1.9; max-width: 600px; margin-bottom: 35px; } /*========================================================================================================================== Buttons ============================================================================================================================*/ .hero-buttons { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 45px; } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: .35s ease; font-weight: 600; } .btn-primary { padding: 16px 34px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: 50px; box-shadow: 0 15px 35px rgba(34, 197, 94, .25); } .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(34, 197, 94, .35); } .btn-secondary { padding: 16px 28px; border-radius: 50px; border: 2px solid var(--border); color: var(--text); background: var(--card); } .btn-secondary:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-secondary i { font-size: 22px; } /*========================================================================================================================== Small Devices ============================================================================================================================*/ @media (max-width:991px) { .hero { padding: 130px 0 80px; } .hero-wrapper { grid-template-columns: 1fr; text-align: center; gap: 60px; } .hero-content p { margin: auto auto 35px; } .hero-buttons { justify-content: center; } } @media (max-width:768px) { .hero-content h1 { font-size: 2.8rem; } } @media (max-width:576px) { .hero { padding-top: 120px; } .hero-content h1 { font-size: 2.2rem; } .hero-content p { font-size: .95rem; } .hero-buttons { flex-direction: column; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } } /*========================================================================================================================== HERO SECTION - PART 2 Image | Rating | Stats | Floating Cards ==========================================================================================================================*/ /*========================================================================================================================== Hero Image ============================================================================================================================*/ .hero-image { position: relative; display: flex; justify-content: center; align-items: center; } .hero-image img { width: 100%; max-width: 650px; border-radius: 30px; box-shadow: 0 25px 60px rgba(0, 0, 0, .18); object-fit: cover; transition: .5s ease; } .hero-image img:hover { transform: scale(1.03); } /*==================================== Floating Cards =====================================*/ .floating-card { position: absolute; display: flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 15px 20px; border-radius: 18px; box-shadow: 0 20px 40px rgba(0, 0, 0, .12); animation: floatCard 4s ease-in-out infinite; min-width: 220px; z-index: 10; } html[data-theme="dark"] .floating-card { background: rgba(17, 24, 39, .92); } .floating-card i { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 22px; flex-shrink: 0; } .floating-card h4 { font-size: 1.2rem; margin-bottom: 4px; color: var(--text); } .floating-card p { margin: 0; font-size: .9rem; color: var(--text-light); line-height: 1.4; } /* Card Positions */ .card-1 { top: 10%; left: -40px; } .card-2 { bottom: 18%; right: -50px; animation-delay: 1s; } .card-3 { bottom: -30px; left: 50px; animation-delay: 2s; } /*========================================================================================================================== Rating Section ==========================================================================================================================*/ .hero-rating { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; } .rating-images { display: flex; } .rating-images img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin-left: -15px; } .rating-images img:first-child { margin-left: 0; } .rating-content h3 { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; color: var(--text); } .rating-content span { color: #facc15; font-size: .9rem; } .rating-content p { margin-top: 5px; color: var(--text-light); font-size: .95rem; } /*========================================================================================================================== Hero Statistics ==========================================================================================================================*/ .hero-stats { display: flex; gap: 20px; flex-wrap: wrap; } .stat-box { flex: 1; min-width: 150px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 25px; text-align: center; transition: .35s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); } .stat-box:hover { transform: translateY(-8px); border-color: var(--primary); } .stat-box h2 { color: var(--primary); font-size: 2rem; margin-bottom: 10px; } .stat-box span { color: var(--text-light); font-size: .95rem; } /*========================================================================================================================== Responsive ==========================================================================================================================*/ @media(max-width:991px) { .hero-image { order: -1; } .hero-rating { justify-content: center; } .hero-stats { justify-content: center; } .card-1 { top: 5%; left: 10px; } .card-2 { right: 10px; } .card-3 { left: 20px; bottom: -15px; } } @media(max-width:768px) { .floating-card { transform: scale(.85); } .hero-stats { flex-direction: column; } } @media(max-width:576px) { .floating-card { position: static; margin-top: 20px; width: 100%; } .hero-image { display: flex; flex-direction: column; gap: 15px; } .hero-rating { flex-direction: column; text-align: center; } .rating-content h3 { justify-content: center; } } /*========================================================================================================================== HERO SECTION - PART 3 Animation | Scroll | Responsive ==========================================================================================================================*/ /*========================================================================================================================== Hero Image Glow ==========================================================================================================================*/ .hero-image::before { content: ""; position: absolute; width: 420px; height: 420px; background: radial-gradient(circle, rgba(34, 197, 94, .25), transparent 70%); border-radius: 50%; z-index: -1; animation: glow 5s ease-in-out infinite; } .hero-image::after { content: ""; position: absolute; width: 260px; height: 260px; border: 2px dashed rgba(34, 197, 94, .2); border-radius: 50%; z-index: -1; animation: rotateCircle 20s linear infinite; } /*========================================================================================================================== Scroll Down Button ==========================================================================================================================*/ .scroll-down { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); width: 40px; height: 70px; border: 2px solid var(--primary); border-radius: 50px; display: flex; justify-content: center; align-items: flex-start; padding-top: 10px; } .scroll-down span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: scrollDown 2s infinite; } /*========================================================================================================================== Floating Animation ==========================================================================================================================*/ @keyframes floatCard { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } /*========================================================================================================================== Glow Animation ==========================================================================================================================*/ @keyframes glow { 0% { transform: scale(1); opacity: .4; } 50% { transform: scale(1.15); opacity: .8; } 100% { transform: scale(1); opacity: .4; } } /*========================================================================================================================== Rotate Circle ==========================================================================================================================*/ @keyframes rotateCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*========================================================================================================================== Scroll Animation ==========================================================================================================================*/ @keyframes scrollDown { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(30px); opacity: 0; } } /*========================================================================================================================== Fade Up ==========================================================================================================================*/ @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero-content { animation: fadeUp .9s ease; } .hero-image { animation: fadeUp 1.2s ease; } /*========================================================================================================================== Background Shapes Animation ==========================================================================================================================*/ .shape-1 { animation: floatShape1 10s ease-in-out infinite; } .shape-2 { animation: floatShape2 12s ease-in-out infinite; } .shape-3 { animation: floatShape3 14s ease-in-out infinite; } @keyframes floatShape1 { 50% { transform: translateY(40px) translateX(20px); } } @keyframes floatShape2 { 50% { transform: translateY(-40px) translateX(-20px); } } @keyframes floatShape3 { 50% { transform: translateY(-25px) translateX(30px); } } /*========================================================================================================================== Desktop ==========================================================================================================================*/ @media(min-width:1400px) { .hero-content h1 { font-size: 4.5rem; } } /*========================================================================================================================== Tablet ==========================================================================================================================*/ @media(max-width:992px) { .hero { text-align: center; } .hero-image::before, .hero-image::after { display: none; } } /*========================================================================================================================== Mobile ==========================================================================================================================*/ @media(max-width:768px) { .hero { min-height: auto; } .scroll-down { display: none; } } /*========================================================================================================================== Small Mobile ==========================================================================================================================*/ @media(max-width:480px) { .hero-content h1 { font-size: 2rem; } .hero-badge { font-size: .8rem; } .stat-box { padding: 18px; } } /*================================================== ABOUT SECTION - PART 1 ==================================================*/ .about { position: relative; padding: 120px 0; background: var(--bg); overflow: hidden; } .about-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /*==================================== Left Image ====================================*/ .about-image { position: relative; } .about-image img { width: 100%; border-radius: 25px; display: block; object-fit: cover; box-shadow: 0 20px 60px rgba(0, 0, 0, .15); transition: .4s ease; } .about-image:hover img { transform: scale(1.03); } /*==================================== Floating Cards ====================================*/ .experience-card { position: absolute; top: 30px; left: -30px; background: var(--primary); color: #fff; padding: 22px 28px; border-radius: 20px; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, .15); } .experience-card h2 { font-size: 2rem; margin-bottom: 5px; } .experience-card p { font-size: .9rem; } .success-card { position: absolute; right: -30px; bottom: 40px; display: flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 18px 22px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, .12); } html[data-theme="dark"] .success-card { background: rgba(17, 24, 39, .92); } .success-card i { width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: var(--primary); color: #fff; font-size: 22px; } .success-card h4 { font-size: 1.2rem; margin-bottom: 4px; color: var(--text); } .success-card p { color: var(--text-light); font-size: .9rem; } /*==================================== Right Content ====================================*/ .about-content { position: relative; } .section-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(34, 197, 94, .12); color: var(--primary); padding: 10px 18px; border-radius: 50px; font-size: .9rem; font-weight: 600; margin-bottom: 20px; } .section-badge i { font-size: 18px; } .about-content h2 { font-size: 3rem; line-height: 1.3; color: var(--text); margin-bottom: 25px; } .about-content h2 span { color: var(--primary); } .about-content p { color: var(--text-light); line-height: 1.9; margin-bottom: 35px; font-size: 1rem; } /*================================================== ABOUT SECTION - PART 2 Features | Buttons | Animation ==================================================*/ /*==================================== Features ====================================*/ .about-features { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; } .feature-item { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); transition: .35s ease; box-shadow: 0 10px 25px rgba(0, 0, 0, .05); } .feature-item:hover { transform: translateY(-8px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0, 0, 0, .08); } .feature-item i { width: 55px; height: 55px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 22px; } .feature-item h4 { color: var(--text); margin-bottom: 8px; font-size: 1.15rem; } .feature-item p { color: var(--text-light); margin: 0; line-height: 1.7; font-size: .95rem; } /*==================================== Buttons ====================================*/ .about-buttons { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /*==================================== Animation ====================================*/ .about-image { animation: fadeLeft .9s ease; } .about-content { animation: fadeRight .9s ease; } @keyframes fadeLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } /* Floating Cards */ .experience-card { animation: floatAbout 4s ease-in-out infinite; } .success-card { animation: floatAbout 4s ease-in-out infinite; animation-delay: 1.5s; } @keyframes floatAbout { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } } /*==================================== Responsive ====================================*/ @media(max-width:992px) { .about { padding: 90px 0; } .about-wrapper { grid-template-columns: 1fr; gap: 60px; } .about-content { text-align: center; } .about-buttons { justify-content: center; } } @media(max-width:768px) { .about-content h2 { font-size: 2.3rem; } .experience-card { left: 15px; } .success-card { right: 15px; } } @media(max-width:576px) { .about { padding: 70px 0; } .about-content h2 { font-size: 2rem; } .about-buttons { flex-direction: column; } .about-buttons .btn-primary, .about-buttons .btn-secondary { width: 100%; justify-content: center; } .experience-card, .success-card { position: static; margin-top: 20px; } .about-image { display: flex; flex-direction: column; gap: 20px; } .feature-item { padding: 18px; } } /*================================================== SERVICES SECTION - PART 1 ==================================================*/ .services { position: relative; padding: 120px 0; background: var(--bg); overflow: hidden; } /*==================================== Section Heading ====================================*/ .section-title { max-width: 750px; margin: 0 auto 70px; text-align: center; } .section-title h2 { font-size: 3rem; color: var(--text); margin: 20px 0; line-height: 1.3; } .section-title h2 span { color: var(--primary); } .section-title p { color: var(--text-light); line-height: 1.8; font-size: 1rem; } /*==================================== Services Grid ====================================*/ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /*==================================== Service Card ====================================*/ .service-card { position: relative; padding: 40px 30px; background: var(--card); border: 1px solid var(--border); border-radius: 25px; transition: .4s ease; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, .05); } .service-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), #facc15); transform: scaleX(0); transition: .4s ease; } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-12px); border-color: var(--primary); box-shadow: 0 25px 50px rgba(0, 0, 0, .10); } /*==================================== Service Icon ====================================*/ .service-icon { width: 80px; height: 80px; border-radius: 20px; display: flex; justify-content: center; align-items: center; background: rgba(34, 197, 94, .12); color: var(--primary); font-size: 34px; margin-bottom: 30px; transition: .4s ease; } .service-card:hover .service-icon { background: var(--primary); color: #fff; transform: rotate(8deg); } /*==================================== Content ====================================*/ .service-card h3 { font-size: 1.4rem; color: var(--text); margin-bottom: 18px; } .service-card p { color: var(--text-light); line-height: 1.8; margin-bottom: 25px; } /*================================================== SERVICES SECTION - PART 2 Button | Animation | Responsive ==================================================*/ /*==================================== Service Button ====================================*/ .service-btn { display: inline-flex; align-items: center; gap: 10px; color: var(--primary); font-weight: 600; text-decoration: none; transition: .35s ease; } .service-btn i { transition: .35s ease; } .service-btn:hover { color: var(--primary-dark); } .service-btn:hover i { transform: translateX(8px); } /*==================================== Background Glow ====================================*/ .service-card::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(34, 197, 94, .08); top: -80px; right: -80px; transition: .4s ease; } .service-card:hover::after { transform: scale(1.6); } .service-card:hover { background: linear-gradient(180deg, var(--card), rgba(34, 197, 94, .03)); } /*==================================== Entry Animation ====================================*/ .service-card { animation: fadeUp .8s ease both; } .service-card:nth-child(2) { animation-delay: .1s; } .service-card:nth-child(3) { animation-delay: .2s; } .service-card:nth-child(4) { animation-delay: .3s; } .service-card:nth-child(5) { animation-delay: .4s; } .service-card:nth-child(6) { animation-delay: .5s; } /*==================================== Hover Effects ====================================*/ .service-card:hover h3 { color: var(--primary); } .service-card:hover p { color: var(--text); } .service-card:hover .service-btn { letter-spacing: .5px; } /*==================================== Responsive ====================================*/ @media(max-width:1200px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width:992px) { .services { padding: 90px 0; } .section-title { margin-bottom: 50px; } .section-title h2 { font-size: 2.5rem; } } @media(max-width:768px) { .services-grid { grid-template-columns: 1fr; gap: 25px; } .service-card { padding: 35px 25px; } .service-icon { width: 70px; height: 70px; font-size: 30px; } .section-title h2 { font-size: 2.1rem; } } @media(max-width:576px) { .services { padding: 70px 0; } .section-title h2 { font-size: 1.8rem; } .section-title p { font-size: .95rem; } .service-card { padding: 30px 20px; } .service-card h3 { font-size: 1.25rem; } .service-card p { font-size: .95rem; } } /*================================================== WHY CHOOSE US - PART 1 ==================================================*/ .why-choose { position: relative; padding: 120px 0; background: var(--bg); overflow: hidden; } /*==================================== Layout ====================================*/ .why-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /*==================================== Left Content ====================================*/ .why-content h2 { font-size: 3rem; line-height: 1.3; color: var(--text); margin: 20px 0; } .why-content h2 span { color: var(--primary); } .why-content>p { color: var(--text-light); line-height: 1.9; margin-bottom: 40px; } /*==================================== Feature List ====================================*/ .why-list { display: flex; flex-direction: column; gap: 22px; } .why-item { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); transition: .35s ease; box-shadow: 0 10px 25px rgba(0, 0, 0, .05); } .why-item:hover { transform: translateY(-8px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0, 0, 0, .10); } .why-icon { width: 60px; height: 60px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; border-radius: 18px; background: rgba(34, 197, 94, .12); color: var(--primary); font-size: 24px; transition: .35s ease; } .why-item:hover .why-icon { background: var(--primary); color: #fff; } .why-item h4 { color: var(--text); margin-bottom: 8px; font-size: 1.15rem; } .why-item p { color: var(--text-light); line-height: 1.7; font-size: .95rem; margin: 0; } /*==================================== Right Image ====================================*/ .why-image { position: relative; } .why-image img { width: 100%; display: block; border-radius: 25px; object-fit: cover; box-shadow: 0 20px 60px rgba(0, 0, 0, .15); transition: .4s ease; } .why-image:hover img { transform: scale(1.03); } /*================================================== WHY CHOOSE US - PART 2 Achievement | Animation | Responsive ==================================================*/ /*==================================== Achievement Card ====================================*/ .achievement-card { position: absolute; top: 40px; left: -35px; background: var(--primary); color: #fff; padding: 28px 30px; border-radius: 22px; text-align: center; min-width: 190px; box-shadow: 0 20px 45px rgba(0, 0, 0, .18); animation: floatAchievement 4s ease-in-out infinite; } .achievement-card h3 { font-size: 2.2rem; margin-bottom: 8px; } .achievement-card p { font-size: .95rem; line-height: 1.5; } /*==================================== Experience Badge ====================================*/ .experience-badge { position: absolute; right: -30px; bottom: 40px; display: flex; align-items: center; gap: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); padding: 18px 22px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, .12); animation: floatAchievement 4s ease-in-out infinite; animation-delay: 1.5s; } html[data-theme="dark"] .experience-badge { background: rgba(17, 24, 39, .92); } .experience-badge i { width: 58px; height: 58px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: var(--primary); color: #fff; font-size: 22px; } .experience-badge h4 { color: var(--text); margin-bottom: 5px; font-size: 1.15rem; } .experience-badge span { color: var(--text-light); font-size: .9rem; } /*==================================== Hover Effect ====================================*/ .why-image::before { content: ""; position: absolute; width: 220px; height: 220px; background: rgba(34, 197, 94, .08); border-radius: 50%; top: -80px; right: -60px; z-index: -1; transition: .4s; } .why-image:hover::before { transform: scale(1.4); } /*==================================== Animation ====================================*/ @keyframes floatAchievement { 0% { transform: translateY(0); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0); } } .why-content { animation: fadeLeft .8s ease; } .why-image { animation: fadeRight .8s ease; } /*==================================== Responsive ====================================*/ @media(max-width:992px) { .why-choose { padding: 90px 0; } .why-wrapper { grid-template-columns: 1fr; gap: 60px; } .why-content { text-align: center; } } @media(max-width:768px) { .why-content h2 { font-size: 2.3rem; } .achievement-card { left: 15px; top: 20px; } .experience-badge { right: 15px; bottom: 20px; } } @media(max-width:576px) { .why-choose { padding: 70px 0; } .why-content h2 { font-size: 2rem; } .achievement-card, .experience-badge { position: static; width: 100%; margin-top: 20px; } .why-image { display: flex; flex-direction: column; gap: 20px; } .why-item { padding: 18px; } .why-icon { width: 52px; height: 52px; font-size: 20px; } } /*================================================== STATISTICS SECTION - PART 1 ==================================================*/ .statistics { position: relative; padding: 120px 0; background: linear-gradient(180deg, var(--bg), rgba(34, 197, 94, .03)); overflow: hidden; } /*==================================== Statistics Grid ====================================*/ .statistics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; } /*==================================== Statistics Card ====================================*/ .statistics-card { position: relative; text-align: center; padding: 40px 30px; background: var(--card); border: 1px solid var(--border); border-radius: 25px; overflow: hidden; transition: .4s ease; box-shadow: 0 15px 35px rgba(0, 0, 0, .06); } .statistics-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary), #facc15); transform: scaleX(0); transition: .4s ease; } .statistics-card:hover::before { transform: scaleX(1); } .statistics-card:hover { transform: translateY(-12px); border-color: var(--primary); box-shadow: 0 25px 50px rgba(0, 0, 0, .12); } /*==================================== Statistics Icon ====================================*/ .statistics-icon { width: 90px; height: 90px; margin: 0 auto 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: rgba(34, 197, 94, .12); color: var(--primary); font-size: 36px; transition: .4s ease; } .statistics-card:hover .statistics-icon { background: var(--primary); color: #fff; transform: rotate(10deg) scale(1.08); } /*==================================== Counter ====================================*/ .statistics-card h3 { font-size: 2.8rem; color: var(--primary); font-weight: 700; margin-bottom: 12px; } .statistics-card h4 { color: var(--text); font-size: 1.25rem; margin-bottom: 15px; } .statistics-card p { color: var(--text-light); line-height: 1.8; font-size: .95rem; } /*================================================== STATISTICS SECTION - PART 2 Animation | Hover | Responsive ==================================================*/ /*==================================== Background Glow ====================================*/ .statistics::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(34, 197, 94, .08); top: -180px; left: -180px; filter: blur(80px); z-index: 0; } .statistics::after { content: ""; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: rgba(250, 204, 21, .08); right: -150px; bottom: -150px; filter: blur(80px); z-index: 0; } .statistics .container { position: relative; z-index: 2; } /*==================================== Hover Effects ====================================*/ .statistics-card::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(34, 197, 94, .06); top: -90px; right: -90px; transition: .4s ease; } .statistics-card:hover::after { transform: scale(1.6); } .statistics-card:hover h4 { color: var(--primary); } .statistics-card:hover p { color: var(--text); } /*==================================== Entry Animation ====================================*/ .statistics-card { animation: fadeUp .8s ease both; } .statistics-card:nth-child(2) { animation-delay: .15s; } .statistics-card:nth-child(3) { animation-delay: .30s; } .statistics-card:nth-child(4) { animation-delay: .45s; } /*==================================== Icon Floating ====================================*/ .statistics-icon { animation: floatStatistics 4s ease-in-out infinite; } .statistics-card:nth-child(2) .statistics-icon { animation-delay: .5s; } .statistics-card:nth-child(3) .statistics-icon { animation-delay: 1s; } .statistics-card:nth-child(4) .statistics-icon { animation-delay: 1.5s; } @keyframes floatStatistics { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } /*==================================== Responsive ====================================*/ @media(max-width:1200px) { .statistics-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width:992px) { .statistics { padding: 90px 0; } } @media(max-width:768px) { .statistics-grid { grid-template-columns: 1fr; gap: 25px; } .statistics-card { padding: 35px 25px; } .statistics-card h3 { font-size: 2.4rem; } .statistics-icon { width: 80px; height: 80px; font-size: 32px; } } @media(max-width:576px) { .statistics { padding: 70px 0; } .statistics-card { padding: 30px 20px; } .statistics-card h3 { font-size: 2rem; } .statistics-card h4 { font-size: 1.1rem; } .statistics-card p { font-size: .92rem; } } /*================================================== PROJECTS SECTION - PART 1 ==================================================*/ .projects { position: relative; padding: 120px 0; background: var(--bg); overflow: hidden; } /*==================================== Projects Grid ====================================*/ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; } /*==================================== Project Card ====================================*/ .project-card { background: var(--card); border: 1px solid var(--border); border-radius: 25px; overflow: hidden; transition: .4s ease; box-shadow: 0 15px 35px rgba(0, 0, 0, .06); } .project-card:hover { transform: translateY(-12px); border-color: var(--primary); box-shadow: 0 25px 55px rgba(0, 0, 0, .12); } /*==================================== Project Image ====================================*/ .project-image { position: relative; overflow: hidden; } .project-image img { width: 100%; height: 280px; display: block; object-fit: cover; transition: .5s ease; } .project-card:hover .project-image img { transform: scale(1.1); } /*==================================== Overlay ====================================*/ .project-overlay { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: .4s ease; } .project-card:hover .project-overlay { opacity: 1; visibility: visible; } /*==================================== Overlay Button ====================================*/ .project-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #fff; color: var(--primary); font-size: 22px; transition: .35s ease; } .project-btn:hover { background: var(--primary); color: #fff; transform: rotate(45deg); } /*==================================== Category Badge ====================================*/ .project-category { position: absolute; top: 20px; left: 20px; background: var(--primary); color: #fff; padding: 8px 18px; border-radius: 50px; font-size: .85rem; font-weight: 600; } /*================================================== PROJECTS SECTION - PART 2 Content | Animation | Responsive ==================================================*/ /*==================================== Project Content ====================================*/ .project-content { padding: 30px; } .project-content h3 { color: var(--text); font-size: 1.35rem; margin-bottom: 18px; transition: .35s ease; } .project-card:hover h3 { color: var(--primary); } .project-content>p { display: flex; align-items: center; gap: 10px; color: var(--text-light); margin-bottom: 22px; font-size: .95rem; } .project-content>p i { color: var(--primary); } /*==================================== Project Info ====================================*/ .project-info { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--border); } .project-info span { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text); font-weight: 500; } .project-info span i { color: var(--primary); } /*==================================== Background Glow ====================================*/ .projects::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(34, 197, 94, .07); top: -180px; left: -180px; filter: blur(80px); z-index: 0; } .projects::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(250, 204, 21, .08); bottom: -150px; right: -150px; filter: blur(80px); z-index: 0; } .projects .container { position: relative; z-index: 2; } /*==================================== Card Animation ====================================*/ .project-card { animation: fadeUp .8s ease both; } .project-card:nth-child(2) { animation-delay: .1s; } .project-card:nth-child(3) { animation-delay: .2s; } .project-card:nth-child(4) { animation-delay: .3s; } .project-card:nth-child(5) { animation-delay: .4s; } .project-card:nth-child(6) { animation-delay: .5s; } /*==================================== Hover Effects ====================================*/ .project-card:hover .project-category { background: #f59e0b; } .project-card:hover .project-info { border-color: rgba(34, 197, 94, .35); } /*==================================== Responsive ====================================*/ @media(max-width:1200px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media(max-width:992px) { .projects { padding: 90px 0; } } @media(max-width:768px) { .projects-grid { grid-template-columns: 1fr; gap: 25px; } .project-image img { height: 240px; } .project-content { padding: 25px; } } @media(max-width:576px) { .projects { padding: 70px 0; } .project-content { padding: 20px; } .project-content h3 { font-size: 1.2rem; } .project-info { flex-direction: column; align-items: flex-start; gap: 12px; } .project-category { font-size: .8rem; padding: 7px 14px; } } /* ========================================================= PRICING SECTION ========================================================= */ .pricing-section { position: relative; padding: 110px 0; background: var(--bg); overflow: hidden; } /* ========================================================= SECTION HEADER ========================================================= */ .pricing-header { max-width: 760px; margin: 0 auto 75px; text-align: center; } .pricing-header h2 { margin: 18px 0; color: var(--text); font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.15; } .pricing-header h2 span { color: var(--primary); } .pricing-header p { max-width: 650px; margin: 0 auto; color: var(--text-light); font-size: 1rem; line-height: 1.8; } /* ========================================================= CATEGORY ========================================================= */ .pricing-category { margin-bottom: 90px; } .pricing-category:last-child { margin-bottom: 0; } /* ========================================================= CATEGORY HEADER ========================================================= */ .pricing-category-header { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 35px; padding-bottom: 22px; border-bottom: 1px solid var(--border); } .category-label { display: inline-block; margin-bottom: 8px; color: var(--primary); font-size: 0.82rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .pricing-category-header h3 { margin: 0 0 8px; color: var(--text); font-size: clamp(1.6rem, 3vw, 2.2rem); } .pricing-category-header p { margin: 0; color: var(--text-light); font-size: 0.95rem; } .category-icon { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 16px; background: rgba(34, 197, 94, 0.08); color: var(--primary); font-size: 1.35rem; } /* ========================================================= PRICING GRID ========================================================= */ .pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } /* ========================================================= PRICING CARD ========================================================= */ .pricing-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 28px 28px; border: 1px solid var(--border); border-radius: 22px; background: var(--card-bg); overflow: hidden; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .pricing-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: transparent; transition: background 0.35s ease; } .pricing-card:hover { transform: translateY(-8px); border-color: rgba(34, 197, 94, 0.45); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18); } .pricing-card:hover::before { background: var(--primary); } /* ========================================================= CARD TOP ========================================================= */ .pricing-card-top { text-align: center; } .plan-name { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; min-height: 30px; padding: 5px 13px; border-radius: 30px; background: rgba(34, 197, 94, 0.10); color: var(--primary); font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; } .pricing-card h4 { margin: 17px 0 6px; color: var(--text); font-size: 1.45rem; } .pricing-card-top p { margin: 0; color: var(--text-light); font-size: 0.88rem; } /* ========================================================= PRICE ========================================================= */ .pricing-price { margin: 30px 0; text-align: center; } .price { display: block; color: var(--primary); font-size: clamp(2rem, 3vw, 2.55rem); font-weight: 800; line-height: 1.1; } .price-label { display: block; margin-top: 8px; color: var(--text-light); font-size: 0.78rem; } /* ========================================================= FEATURES ========================================================= */ .pricing-features { padding: 0; margin: 0; list-style: none; } .pricing-features li { display: flex; align-items: flex-start; gap: 11px; min-height: 52px; padding: 15px 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.88rem; line-height: 1.4; } .pricing-features li:first-child { border-top: 1px solid var(--border); } .pricing-features li i { flex-shrink: 0; margin-top: 2px; color: var(--primary); font-size: 0.85rem; } /* ========================================================= BUTTON ========================================================= */ .pricing-btn { width: 100%; min-height: 52px; margin-top: 28px; padding: 13px 18px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 30px; background: var(--primary); color: #ffffff; text-decoration: none; font-size: 0.9rem; font-weight: 700; transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .pricing-btn:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(34, 197, 94, 0.25); } .pricing-btn i { font-size: 0.8rem; } /* ========================================================= POPULAR CARD ========================================================= */ .popular-card { border-color: var(--primary); box-shadow: 0 15px 45px rgba(34, 197, 94, 0.10); } .popular-card::before { background: var(--primary); } .popular-badge { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 20px; background: var(--primary); color: #ffffff; font-size: 0.65rem; font-weight: 700; } .popular-badge i { font-size: 0.6rem; } /* ========================================================= COMMERCIAL / INDUSTRIAL ========================================================= */ .commercial-card, .industrial-card { max-width: 520px; } .custom-price { font-size: 2.8rem; } .secondary-btn { background: transparent; border: 1px solid var(--primary); color: var(--primary); } .secondary-btn:hover { background: var(--primary); color: #ffffff; } /* ========================================================= COMING SOON CARD ========================================================= */ .coming-card { align-items: center; justify-content: center; text-align: center; min-height: 100%; } .coming-icon, .custom-project-icon { width: 65px; height: 65px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: rgba(34, 197, 94, 0.10); color: var(--primary); font-size: 1.5rem; } .coming-card h4, .industrial-card h4 { margin: 0 0 10px; color: var(--text); font-size: 1.4rem; } .coming-card p, .industrial-card p { max-width: 360px; margin: 0 auto 20px; color: var(--text-light); line-height: 1.7; } .coming-card .pricing-btn, .industrial-card .pricing-btn { max-width: 320px; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= SMALL TABLET ========================================================= */ @media (max-width: 768px) { .pricing-section { padding: 80px 0; } .pricing-header { margin-bottom: 55px; } .pricing-category { margin-bottom: 65px; } .pricing-category-header { align-items: flex-start; margin-bottom: 28px; } .pricing-category-header p { line-height: 1.6; } .pricing-grid { grid-template-columns: 1fr; gap: 18px; } .pricing-card { padding: 28px 24px 25px; } .commercial-card, .industrial-card { max-width: none; } .category-icon { width: 50px; height: 50px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 576px) { .pricing-section { padding: 70px 0; } .pricing-header { margin-bottom: 45px; } .pricing-header h2 { font-size: 2rem; } .pricing-header p { font-size: 0.9rem; } .pricing-category-header { gap: 15px; } .pricing-category-header h3 { font-size: 1.45rem; } .pricing-category-header p { font-size: 0.85rem; } .category-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 1rem; } .pricing-card { padding: 25px 20px 22px; border-radius: 18px; } .pricing-card h4 { font-size: 1.3rem; } .price { font-size: 2.15rem; } .pricing-features li { font-size: 0.84rem; } .popular-badge { top: 14px; right: 14px; } } /*================================================== PREMIUM TESTIMONIALS - PART 1 ==================================================*/ .testimonials { position: relative; padding: 120px 0; background: linear-gradient(180deg, var(--bg), rgba(34, 197, 94, .03)); overflow: hidden; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-top: 70px; } /*==================================== Card ====================================*/ .testimonial-card { position: relative; padding: 40px 35px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(34, 197, 94, .12); border-radius: 28px; overflow: hidden; transition: all .35s ease; box-shadow: 0 15px 35px rgba(0, 0, 0, .06); isolation: isolate; } html[data-theme="dark"] .testimonial-card { background: rgba(17, 24, 39, .92); } /* Premium Top Gradient */ .testimonial-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #16a34a, #22c55e, #facc15); transform: scaleX(0); transition: .35s; } .testimonial-card:hover::before { transform: scaleX(1); } /*==================================== Hover ====================================*/ .testimonial-card:hover { transform: translateY(-10px); border-color: #22c55e; box-shadow: 0 25px 60px rgba(34, 197, 94, .18); } /*==================================== Quote ====================================*/ .quote-icon { width: 70px; height: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #ecfdf3; color: #16a34a; font-size: 28px; margin-bottom: 25px; transition: .35s; } .testimonial-card:hover .quote-icon { background: #16a34a; color: #fff; transform: rotate(10deg); } /*==================================== Review ====================================*/ .testimonial-text { color: var(--text-light); line-height: 1.9; font-size: 1rem; margin-bottom: 25px; font-style: italic; } /*==================================== Rating ====================================*/ .testimonial-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 30px; } .testimonial-rating i { color: #fbbf24; font-size: 20px; transition: .3s; } /*================================================== PREMIUM TESTIMONIALS - PART 2 ==================================================*/ /*==================================== Customer ====================================*/ .testimonial-user { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(34, 197, 94, .12); } .testimonial-user img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); transition: .35s ease; } .testimonial-card:hover .testimonial-user img { transform: scale(1.08); border-color: #16a34a; } .testimonial-user h3 { color: var(--text); font-size: 1.15rem; margin-bottom: 5px; transition: .35s ease; } .testimonial-user span { color: var(--text-light); font-size: .9rem; } .testimonial-card:hover .testimonial-user h3 { color: var(--primary); } /*==================================== Background Decoration ====================================*/ .testimonials::before { content: ""; position: absolute; width: 350px; height: 350px; left: -150px; top: -150px; border-radius: 50%; background: rgba(34, 197, 94, .08); filter: blur(90px); } .testimonial-card::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(34, 197, 94, .06); right: -80px; top: -80px; transition: .4s; z-index: -1; } .testimonial-card:hover::after { transform: scale(1.5); } .testimonials .container { position: relative; z-index: 2; } /*==================================== Hover Animation ====================================*/ .testimonial-card:hover .testimonial-text { color: var(--text); } .testimonial-card:hover .testimonial-rating i { transform: scale(1.15); } .testimonial-rating i { transition: .3s ease; } /*==================================== Floating Animation ====================================*/ .quote-icon { animation: quoteFloat 4s ease-in-out infinite; } @keyframes quoteFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } /*==================================== Card Animation ====================================*/ .testimonial-card { animation: fadeUp .8s ease both; } .testimonial-card:nth-child(2) { animation-delay: .15s; } .testimonial-card:nth-child(3) { animation-delay: .3s; } /*==================================== Responsive ====================================*/ @media(max-width:992px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; } } @media(max-width:768px) { .testimonials { padding: 90px 0; } .testimonial-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 30px 25px; } .testimonial-user { flex-direction: column; text-align: center; } .testimonial-rating { justify-content: center; } } @media(max-width:576px) { .testimonials { padding: 70px 0; } .testimonial-card { padding: 25px 20px; border-radius: 22px; } .testimonial-text { font-size: .95rem; line-height: 1.8; } .testimonial-user img { width: 60px; height: 60px; } .testimonial-user h3 { font-size: 1rem; } .quote-icon { width: 60px; height: 60px; font-size: 24px; } } /*==================================== Top Badges ====================================*/ .testimonial-badges { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .customer-type { background: rgba(34, 197, 94, .12); color: var(--primary); padding: 8px 16px; border-radius: 30px; font-size: .82rem; font-weight: 600; } .verified { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 30px; background: #ecfdf3; color: #16a34a; font-size: .82rem; font-weight: 600; } html[data-theme="dark"] .verified { background: rgba(34, 197, 94, .12); } .verified i { font-size: 14px; } /*================================================== CTA SECTION - PART 1 ==================================================*/ .cta-section { position: relative; padding: 120px 0; overflow: hidden; background: linear-gradient(135deg, #15803d, #16a34a, #22c55e); } /*==================================== Background Decoration ====================================*/ .cta-section::before { content: ""; position: absolute; width: 450px; height: 450px; border-radius: 50%; background: rgba(255, 255, 255, .08); top: -220px; left: -180px; filter: blur(80px); } .cta-section::after { content: ""; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: rgba(255, 255, 255, .05); right: -150px; bottom: -150px; filter: blur(80px); } .cta-section .container { position: relative; z-index: 2; } /*==================================== Wrapper ====================================*/ .cta-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 60px; } /*==================================== Content ====================================*/ .cta-content { max-width: 700px; } .cta-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 50px; background: rgba(255, 255, 255, .15); color: #fff; backdrop-filter: blur(10px); margin-bottom: 25px; font-weight: 600; } .cta-content h2 { font-size: 3.4rem; line-height: 1.25; color: #fff; margin-bottom: 25px; } .cta-content h2 span { color: #fef08a; } .cta-content p { color: rgba(255, 255, 255, .92); font-size: 1.05rem; line-height: 1.9; } /*================================================== CTA SECTION - PART 2 Buttons | Animation | Responsive ==================================================*/ /*==================================== Buttons ====================================*/ .cta-buttons { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .cta-buttons .btn-primary { background: #ffffff; color: var(--primary); border: 2px solid #ffffff; min-width: 230px; justify-content: center; } .cta-buttons .btn-primary:hover { background: transparent; color: #ffffff; border-color: #ffffff; } .cta-buttons .btn-secondary { background: transparent; color: #ffffff; border: 2px solid rgba(255, 255, 255, .4); min-width: 200px; justify-content: center; } .cta-buttons .btn-secondary:hover { background: #ffffff; color: var(--primary); border-color: #ffffff; } .cta-buttons a { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all .35s ease; } .cta-buttons a i { transition: .35s ease; } .cta-buttons a:hover i { transform: translateX(5px); } /*==================================== Floating Animation ====================================*/ .cta-content { animation: fadeLeft .8s ease; } .cta-buttons { animation: fadeRight .8s ease; } .cta-badge { animation: ctaFloat 4s ease-in-out infinite; } @keyframes ctaFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } /*==================================== Hover Glow ====================================*/ .cta-wrapper { position: relative; } .cta-wrapper::before { content: ""; position: absolute; width: 250px; height: 250px; border-radius: 50%; background: rgba(255, 255, 255, .08); right: 50px; top: 50%; transform: translateY(-50%); filter: blur(60px); z-index: -1; } /*==================================== Responsive ====================================*/ @media(max-width:992px) { .cta-section { padding: 90px 0; } .cta-wrapper { flex-direction: column; text-align: center; } .cta-buttons { justify-content: center; } .cta-content h2 { font-size: 2.8rem; } } @media(max-width:768px) { .cta-content h2 { font-size: 2.3rem; } .cta-content p { font-size: 1rem; } .cta-buttons { width: 100%; flex-direction: column; } .cta-buttons a { width: 100%; max-width: 340px; } } @media(max-width:576px) { .cta-section { padding: 70px 0; } .cta-content h2 { font-size: 2rem; } .cta-badge { font-size: .85rem; } .cta-buttons a { padding: 15px 22px; } } /*================================================== FAQ SECTION - PART 1 ==================================================*/ .faq { position: relative; padding: 120px 0; background: var(--bg); overflow: hidden; } /*==================================== FAQ Wrapper ====================================*/ .faq-wrapper { max-width: 900px; margin: 70px auto 0; display: flex; flex-direction: column; gap: 20px; } /*==================================== FAQ Item ====================================*/ .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; transition: .35s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, .05); } .faq-item:hover { border-color: var(--primary); box-shadow: 0 20px 40px rgba(34, 197, 94, .12); } /*==================================== Question ====================================*/ .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 30px; background: transparent; border: none; cursor: pointer; text-align: left; color: var(--text); font-size: 1.1rem; font-weight: 600; transition: .35s ease; } .faq-question span { flex: 1; padding-right: 20px; } .faq-question i { width: 42px; height: 42px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: rgba(34, 197, 94, .12); color: var(--primary); transition: .35s ease; } /*==================================== Active Item ====================================*/ .faq-item.active { border-color: var(--primary); } .faq-item.active .faq-question { color: var(--primary); } .faq-item.active .faq-question i { background: var(--primary); color: #fff; transform: rotate(45deg); } /*==================================== Answer ====================================*/ .faq-answer { max-height: 0; overflow: hidden; transition: max-height .45s ease; } .faq-answer p { padding: 0 30px 25px; color: var(--text-light); line-height: 1.9; } /*================================================== FAQ SECTION - PART 2 ==================================================*/ /*==================================== Background Glow ====================================*/ .faq::before { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(34, 197, 94, .06); top: -180px; left: -180px; filter: blur(90px); } .faq::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(250, 204, 21, .08); right: -120px; bottom: -120px; filter: blur(90px); } .faq .container { position: relative; z-index: 2; } /*==================================== Hover Effects ====================================*/ .faq-item:hover .faq-question i { transform: scale(1.1); } .faq-item.active .faq-answer { max-height: 250px; } .faq-item.active .faq-question { background: rgba(34, 197, 94, .05); } /*==================================== Card Animation ====================================*/ .faq-item { animation: fadeUp .8s ease both; } .faq-item:nth-child(2) { animation-delay: .1s; } .faq-item:nth-child(3) { animation-delay: .2s; } .faq-item:nth-child(4) { animation-delay: .3s; } .faq-item:nth-child(5) { animation-delay: .4s; } .faq-item:nth-child(6) { animation-delay: .5s; } /*==================================== Responsive ====================================*/ @media(max-width:992px) { .faq { padding: 90px 0; } } @media(max-width:768px) { .faq-wrapper { margin-top: 50px; } .faq-question { padding: 20px; font-size: 1rem; } .faq-answer p { padding: 0 20px 20px; } } @media(max-width:576px) { .faq { padding: 70px 0; } .faq-question { padding: 18px; font-size: .95rem; } .faq-question i { width: 36px; height: 36px; font-size: 14px; } .faq-answer p { font-size: .92rem; line-height: 1.7; } } /*================================================== CONTACT SECTION - PART 1 ==================================================*/ .contact { position: relative; padding: 120px 0; background: linear-gradient(180deg, var(--bg), rgba(34, 197, 94, .03)); overflow: hidden; } /*==================================== Background Glow ====================================*/ .contact::before { content: ""; position: absolute; width: 420px; height: 420px; left: -180px; top: -180px; border-radius: 50%; background: rgba(34, 197, 94, .08); filter: blur(90px); } .contact::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -120px; border-radius: 50%; background: rgba(250, 204, 21, .08); filter: blur(90px); } .contact .container { position: relative; z-index: 2; } /*==================================== Wrapper ====================================*/ .contact-wrapper { display: grid; grid-template-columns: 420px 1fr; gap: 50px; margin-top: 70px; align-items: start; } /*==================================== Contact Info ====================================*/ .contact-info { display: flex; flex-direction: column; gap: 25px; } /*==================================== Contact Card ====================================*/ .contact-card { display: flex; align-items: center; gap: 20px; padding: 25px; border-radius: 22px; background: var(--card); border: 1px solid var(--border); transition: .35s ease; box-shadow: 0 15px 35px rgba(0, 0, 0, .05); } .contact-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 20px 45px rgba(34, 197, 94, .12); } /*==================================== Icon ====================================*/ .contact-icon { width: 65px; height: 65px; border-radius: 18px; display: flex; justify-content: center; align-items: center; background: rgba(34, 197, 94, .12); color: var(--primary); font-size: 24px; transition: .35s ease; } .contact-card:hover .contact-icon { background: var(--primary); color: #fff; transform: rotate(10deg); } /*==================================== Contact Text ====================================*/ .contact-card h3 { color: var(--text); margin-bottom: 8px; font-size: 1.15rem; } .contact-card p { color: var(--text-light); line-height: 1.7; } /*================================================== CONTACT SECTION - PART 2 Form | Hover | Responsive ==================================================*/ /*==================================== Contact Form ====================================*/ .contact-form-box { background: var(--card); border: 1px solid var(--border); border-radius: 28px; padding: 40px; box-shadow: 0 20px 50px rgba(0, 0, 0, .06); transition: .35s ease; } .contact-form-box:hover { border-color: var(--primary); box-shadow: 0 25px 60px rgba(34, 197, 94, .12); } /*==================================== Form ====================================*/ .contact-form { display: flex; flex-direction: column; gap: 22px; } .form-group { width: 100%; } /*==================================== Inputs ====================================*/ .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; outline: none; transition: .3s ease; font-family: inherit; } .contact-form textarea { resize: vertical; min-height: 160px; } /*==================================== Placeholder ====================================*/ .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-light); } /*==================================== Focus ====================================*/ .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(34, 197, 94, .12); } /*==================================== Button ====================================*/ .contact-form .btn-primary { width: 100%; justify-content: center; padding: 18px; border: none; cursor: pointer; font-size: 1rem; border-radius: 50px; transition: .35s ease; } .contact-form .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(34, 197, 94, .25); } .contact-form .btn-primary i { margin-right: 10px; } /*==================================== Form Animation ====================================*/ .contact-form-box { animation: fadeRight .8s ease both; } .contact-info { animation: fadeLeft .8s ease both; } /*==================================== Responsive ====================================*/ @media(max-width:992px) { .contact { padding: 90px 0; } .contact-wrapper { grid-template-columns: 1fr; gap: 40px; } } @media(max-width:768px) { .contact-form-box { padding: 30px; } .contact-card { padding: 20px; } .contact-icon { width: 55px; height: 55px; font-size: 20px; } } @media(max-width:576px) { .contact { padding: 70px 0; } .contact-form-box { padding: 22px; border-radius: 20px; } .contact-card { flex-direction: column; text-align: center; } .contact-form input, .contact-form select, .contact-form textarea { padding: 14px 16px; font-size: .95rem; } .contact-form .btn-primary { padding: 16px; } } /*================================================== GOOGLE MAP SECTION ==================================================*/ .map-section { position: relative; padding: 110px 0; background: var(--bg); overflow: hidden; } .map-section .container { position: relative; z-index: 2; } .map-wrapper { position: relative; max-width: 1400px; margin: 65px auto 0; padding: 0 20px; } .map-wrapper iframe { display: block; width: 100%; height: 550px; border: 0; border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .10); } /*==================================== Map Information Card ====================================*/ .map-info { position: absolute; z-index: 5; top: 35px; left: 55px; width: 350px; padding: 30px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(34, 197, 94, .15); border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .15); backdrop-filter: blur(15px); } .map-info h3 { margin: 0 0 22px; color: var(--text); font-size: 1.45rem; } .map-info ul { padding: 0; margin: 0 0 25px; list-style: none; } .map-info li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 17px; color: var(--text-light); line-height: 1.6; } .map-info li i { flex-shrink: 0; margin-top: 4px; color: var(--primary); } .map-info a { color: inherit; text-decoration: none; } .map-info .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; } /*==================================== Mobile ====================================*/ @media(max-width:992px) { .map-wrapper { margin-top: 45px; } .map-info { position: relative; top: auto; left: auto; width: auto; margin: 0 0 25px; } .map-wrapper iframe { height: 450px; } } @media(max-width:576px) { .map-section { padding: 75px 0; } .map-wrapper { padding: 0 15px; } .map-info { padding: 22px; border-radius: 18px; } .map-info h3 { font-size: 1.25rem; } .map-wrapper iframe { height: 350px; border-radius: 18px; } } /*================================================== FOOTER - PART 1 ==================================================*/ .footer { position: relative; background: #0f172a; color: #cbd5e1; padding: 90px 0 30px; overflow: hidden; } /*==================================== Background Glow ====================================*/ .footer::before { content: ""; position: absolute; width: 450px; height: 450px; left: -220px; top: -220px; border-radius: 50%; background: rgba(34, 197, 94, .08); filter: blur(100px); } .footer::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -120px; border-radius: 50%; background: rgba(250, 204, 21, .06); filter: blur(90px); } .footer .container { position: relative; z-index: 2; } /*==================================== Grid ====================================*/ .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 50px; margin-bottom: 60px; } /*==================================== Footer Logo ====================================*/ .footer-logo { display: flex; align-items: center; gap: 18px; text-decoration: none; margin-bottom: 25px; } .footer-logo-img { width: 70px; height: 70px; border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; } .footer-logo-text { display: flex; flex-direction: column; } .footer-logo-text h2 { margin: 0; color: #fff; font-size: 2rem; font-weight: 700; line-height: 1.1; } .footer-logo-text span { margin-top: 5px; color: #fff; font-size: 1.8rem; font-weight: 700; } /*==================================== About ====================================*/ .footer-column p { color: #94a3b8; line-height: 1.9; margin-bottom: 30px; } /*==================================== Heading ====================================*/ .footer-column h3 { color: #ffffff; margin-bottom: 25px; font-size: 1.25rem; position: relative; } .footer-column h3::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 45px; height: 3px; border-radius: 10px; background: var(--primary); } /*==================================== Links ====================================*/ .footer-column ul { list-style: none; padding: 0; } .footer-column ul li { margin-bottom: 15px; } .footer-column ul li a { color: #94a3b8; text-decoration: none; transition: .3s ease; } .footer-column ul li a:hover { color: #22c55e; padding-left: 8px; } /*================================================== FOOTER - PART 1 ==================================================*/ .footer { position: relative; background: #0f172a; color: #cbd5e1; padding: 90px 0 30px; overflow: hidden; } /*==================================== Background Glow ====================================*/ .footer::before { content: ""; position: absolute; width: 450px; height: 450px; left: -220px; top: -220px; border-radius: 50%; background: rgba(34, 197, 94, .08); filter: blur(100px); } .footer::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -120px; border-radius: 50%; background: rgba(250, 204, 21, .06); filter: blur(90px); } .footer .container { position: relative; z-index: 2; } /*==================================== Grid ====================================*/ .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 50px; margin-bottom: 60px; } /*==================================== Logo ====================================*/ .footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; text-decoration: none; font-size: 2rem; font-weight: 700; color: #ffffff; } .footer-logo i { color: var(--primary); } .footer-logo span { color: var(--primary); } /*==================================== About ====================================*/ .footer-column p { color: #94a3b8; line-height: 1.9; margin-bottom: 30px; } /*==================================== Heading ====================================*/ .footer-column h3 { color: #ffffff; margin-bottom: 25px; font-size: 1.25rem; position: relative; } .footer-column h3::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 45px; height: 3px; border-radius: 10px; background: var(--primary); } /*==================================== Links ====================================*/ .footer-column ul { list-style: none; padding: 0; } .footer-column ul li { margin-bottom: 15px; } .footer-column ul li a { color: #94a3b8; text-decoration: none; transition: .3s ease; } .footer-column ul li a:hover { color: #22c55e; padding-left: 8px; } @media(max-width:576px) { .footer-logo { justify-content: center; text-align: center; } .footer-logo-img { width: 55px; height: 55px; } .footer-logo-text h2 { font-size: 1.5rem; } .footer-logo-text span { font-size: 1.3rem; } } @media(max-width:768px) { .footer-grid { grid-template-columns: 1fr; gap: 35px; } } /*================================================== FLOATING BUTTONS - PART 1 ==================================================*/ .floating-buttons { position: fixed; right: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 9999; } /*==================================== Common Button ====================================*/ .floating-btn { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; text-decoration: none; border: none; cursor: pointer; color: #fff; font-size: 24px; box-shadow: 0 15px 35px rgba(0, 0, 0, .18); transition: all .35s ease; } /*==================================== WhatsApp ====================================*/ .whatsapp-btn { background: #25D366; } .whatsapp-btn:hover { transform: translateY(-6px) scale(1.08); box-shadow: 0 20px 40px rgba(37, 211, 102, .35); } /*==================================== Call ====================================*/ .call-btn { background: #2563eb; } .call-btn:hover { transform: translateY(-6px) scale(1.08); box-shadow: 0 20px 40px rgba(37, 99, 235, .35); } /*==================================== Back To Top ====================================*/ .top-btn { background: var(--primary); opacity: 0; visibility: hidden; transform: translateY(30px); } .top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); } .top-btn:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(34, 197, 94, .35); }