/* ========================= GLOBAL CSS Note: Poppins font is loaded via tags in the of every HTML page — do NOT re-add an @import here, it would load the font twice and slow down page rendering. ========================= */ *{ margin: 0; padding: 0; box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ font-family: 'Poppins', sans-serif; background: #f5fbff; color: #111; overflow-x: hidden; } .container{ width: 90%; max-width: 1300px; margin: auto; } a{ text-decoration: none; } ul{ list-style: none; } /* ========================= HEADER ========================= */ .header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; padding: 18px 0; transition: 0.4s ease; background: rgba(0, 10, 35, 0.35); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); } .navbar{ display: flex; align-items: center; justify-content: space-between; } /* ========================= LOGO ========================= */ .logo{ font-size: 34px; font-weight: 800; color: #ffffff; letter-spacing: 1px; } .logo span{ color: #00cfff; } /* ========================= NAV MENU ========================= */ .nav-menu{ display: flex; align-items: center; gap: 35px; } .nav-menu a{ color: #ffffff; font-size: 16px; font-weight: 500; position: relative; transition: 0.3s ease; } .nav-menu a::after{ content: ''; position: absolute; left: 0; bottom: -8px; width: 0%; height: 2px; background: #00cfff; transition: 0.4s ease; } .nav-menu a:hover::after, .nav-menu a.active::after{ width: 100%; } .nav-menu a:hover{ color: #00cfff; } /* ========================= CALL BUTTON ========================= */ .call-btn{ background: linear-gradient(135deg, #00cfff, #005eff); color: #ffffff; padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: 0.4s ease; box-shadow: 0 10px 30px rgba(0, 140, 255, 0.35); } .call-btn:hover{ transform: translateY(-4px); box-shadow: 0 15px 35px rgba(0, 140, 255, 0.45); } /* ========================= NAV RIGHT ========================= */ .nav-right{ display: flex; align-items: center; gap: 20px; } /* ========================= HAMBURGER ========================= */ .hamburger{ display: none; flex-direction: column; gap: 5px; cursor: pointer; } .hamburger span{ width: 26px; height: 3px; border-radius: 20px; background: #ffffff; transition: 0.3s ease; } /* ========================= FOOTER ========================= */ .footer{ background: linear-gradient(135deg, #02142f, #031d44); color: #ffffff; padding-top: 90px; position: relative; overflow: hidden; } .footer::before{ content: ''; position: absolute; width: 450px; height: 450px; background: rgba(0, 207, 255, 0.08); border-radius: 50%; top: -180px; right: -180px; } .footer-wrapper, .footer-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; position: relative; z-index: 2; } /* ========================= FOOTER LOGO ========================= */ .footer-logo{ font-size: 32px; font-weight: 800; color: #ffffff; display: inline-block; margin-bottom: 20px; } .footer-logo span{ color: #00cfff; } /* ========================= FOOTER TEXT ========================= */ .footer-about{ color: #c8d4e5; font-size: 15px; line-height: 1.8; margin-bottom: 25px; } .footer-about h3{ color: #ffffff; font-size: 22px; margin-bottom: 20px; position: relative; } /* ========================= FOOTER HEADING ========================= */ .footer-col h3, .footer-links h4{ font-size: 22px; margin-bottom: 25px; position: relative; color: #ffffff; } .footer-col h3::after, .footer-links h4::after{ content: ''; position: absolute; left: 0; bottom: -10px; width: 55px; height: 3px; background: #00cfff; border-radius: 10px; } /* ========================= FOOTER LINKS ========================= */ .footer-col ul li, .footer-links ul li{ margin-bottom: 15px; } .footer-col ul li a, .footer-links ul li a{ color: #d5deea; transition: 0.3s ease; font-size: 15px; } .footer-col ul li a:hover, .footer-links ul li a:hover{ color: #00cfff; padding-left: 5px; } /* ========================= FOOTER CONTACT ========================= */ .footer-contact h4{ font-size: 22px; margin-bottom: 25px; color: #ffffff; position: relative; } .footer-contact h4::after{ content: ''; position: absolute; left: 0; bottom: -10px; width: 55px; height: 3px; background: #00cfff; border-radius: 10px; } .footer-contact p{ color: #d5deea; font-size: 15px; line-height: 1.8; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 12px; } .footer-contact i{ color: #00cfff; margin-top: 5px; } /* ========================= SOCIAL ICONS ========================= */ .footer-socials{ display: flex; gap: 14px; } .footer-socials a{ width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #ffffff; display: flex; align-items: center; justify-content: center; transition: 0.4s ease; font-size: 16px; } .footer-socials a:hover{ background: #00cfff; transform: translateY(-5px); } /* ========================= FOOTER BOTTOM ========================= */ .footer-bottom{ border-top: 1px solid rgba(255,255,255,0.08); margin-top: 70px; padding: 25px 0; text-align: center; position: relative; z-index: 2; } .footer-bottom p{ color: #b6c3d5; font-size: 14px; } /* ========================= RESPONSIVE ========================= */ @media(max-width: 992px){ .nav-menu{ position: fixed; top: 90px; right: -100%; width: 300px; height: calc(100vh - 90px); background: #031d44; flex-direction: column; align-items: flex-start; padding: 50px 30px; transition: 0.4s ease; gap: 25px; } .nav-menu.active{ right: 0; } .hamburger{ display: flex; } .call-btn{ display: none; } .footer-wrapper, .footer-grid{ grid-template-columns: repeat(2, 1fr); } } @media(max-width: 768px){ .logo{ font-size: 28px; } .footer-wrapper, .footer-grid{ grid-template-columns: 1fr; } .footer{ padding-top: 70px; } .footer-bottom{ margin-top: 40px; } } /* ========================= HERO SECTION ========================= */ .hero-section{ position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient( 135deg, #02142f 0%, #032b63 40%, #004aad 70%, #00aaff 100% ); padding-top: 140px; } /* ========================= HERO BACKGROUND SHAPES ========================= */ .hero-shape{ position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; z-index: 1; } .shape-1{ width: 400px; height: 400px; background: #00cfff; top: -120px; left: -120px; } .shape-2{ width: 350px; height: 350px; background: #005eff; bottom: -120px; right: -120px; } .shape-3{ width: 250px; height: 250px; background: #7ae7ff; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ========================= HERO WRAPPER ========================= */ .hero-wrapper{ position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } /* ========================= HERO CONTENT ========================= */ .hero-content{ color: #ffffff; } .hero-badge{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); border-radius: 50px; backdrop-filter: blur(10px); font-size: 14px; font-weight: 500; margin-bottom: 28px; } .hero-badge i{ color: #00d5ff; } /* ========================= HERO HEADING ========================= */ .hero-content h1{ font-size: 64px; line-height: 1.1; font-weight: 800; margin-bottom: 25px; } .hero-content h1 span{ color: #00d5ff; } /* ========================= HERO PARAGRAPH ========================= */ .hero-content p{ font-size: 18px; line-height: 1.9; color: #d8e8ff; margin-bottom: 38px; max-width: 650px; } /* ========================= HERO BUTTONS ========================= */ .hero-buttons{ display: flex; align-items: center; gap: 20px; margin-bottom: 45px; } .hero-primary-btn{ background: linear-gradient(135deg, #00cfff, #005eff); color: #ffffff; padding: 16px 34px; border-radius: 50px; font-size: 15px; font-weight: 600; transition: 0.4s ease; box-shadow: 0 12px 35px rgba(0, 170, 255, 0.35); } .hero-primary-btn:hover{ transform: translateY(-5px); box-shadow: 0 18px 45px rgba(0, 170, 255, 0.45); } .hero-secondary-btn{ padding: 15px 34px; border-radius: 50px; border: 2px solid rgba(255,255,255,0.2); color: #ffffff; font-size: 15px; font-weight: 600; transition: 0.4s ease; backdrop-filter: blur(10px); } .hero-secondary-btn:hover{ background: rgba(255,255,255,0.12); border-color: #00d5ff; } /* ========================= TRUST FEATURES ========================= */ .hero-features{ display: flex; flex-wrap: wrap; gap: 18px; } .feature-item{ display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08); padding: 12px 18px; border-radius: 50px; font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,0.08); } .feature-item i{ color: #00d5ff; } /* ========================= HERO IMAGE ========================= */ .hero-image{ position: relative; display: flex; justify-content: center; align-items: center; } .hero-image img{ width: 100%; max-width: 520px; height: auto; position: relative; z-index: 2; animation: floating 4s ease-in-out infinite; } /* ========================= IMAGE GLOW BG ========================= */ .hero-image-bg{ position: absolute; width: 420px; height: 420px; background: radial-gradient( circle, rgba(0,213,255,0.45) 0%, rgba(0,213,255,0.08) 45%, transparent 75% ); border-radius: 50%; z-index: 1; } /* ========================= FLOATING ANIMATION ========================= */ @keyframes floating{ 0%{ transform: translateY(0px); } 50%{ transform: translateY(-18px); } 100%{ transform: translateY(0px); } } /* ========================= RESPONSIVE ========================= */ @media(max-width: 1200px){ .hero-content h1{ font-size: 54px; } } @media(max-width: 992px){ .hero-section{ padding-top: 160px; padding-bottom: 100px; } .hero-wrapper{ grid-template-columns: 1fr; text-align: center; } .hero-content{ order: 2; } .hero-image{ order: 1; } .hero-content p{ margin: auto; margin-bottom: 38px; } .hero-buttons{ justify-content: center; } .hero-features{ justify-content: center; } .hero-content h1{ font-size: 48px; } } @media(max-width: 768px){ .hero-content h1{ font-size: 38px; } .hero-content p{ font-size: 16px; line-height: 1.8; } .hero-buttons{ flex-direction: column; } .hero-primary-btn, .hero-secondary-btn{ width: 100%; text-align: center; } .hero-image img{ max-width: 380px; } } @media(max-width: 480px){ .hero-section{ padding-top: 140px; } .hero-content h1{ font-size: 32px; } .hero-badge{ font-size: 13px; } .feature-item{ width: 100%; justify-content: center; } } /* ========================= COMMERCIAL RO SECTION ========================= */ .commercial-section{ padding: 120px 0; background: #f7fbff; position: relative; overflow: hidden; } /* ========================= SECTION HEADING (Shared by all pages — do not redefine .section-heading / .section-badge in about.css, contact.css or services.css) ========================= */ .section-heading{ text-align: center; max-width: 850px; margin: auto; margin-bottom: 70px; position: relative; z-index: 2; } .section-badge{ display: inline-flex; align-items: center; gap: 10px; background: rgba(0, 170, 255, 0.08); color: #0077ff; padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 600; margin-bottom: 24px; } .section-badge i{ color: #00bfff; } .section-heading h2{ font-size: 52px; line-height: 1.2; font-weight: 800; color: #071c3d; margin-bottom: 20px; } .section-heading h2 span{ color: #0077ff; } .section-heading p{ font-size: 17px; line-height: 1.9; color: #5b6b84; } /* ========================= COMMERCIAL GRID ========================= */ .commercial-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; } /* ========================= COMMERCIAL CARD ========================= */ .commercial-card{ background: #ffffff; border-radius: 28px; overflow: hidden; transition: 0.45s ease; box-shadow: 0 15px 45px rgba(0,0,0,0.07); position: relative; } .commercial-card:hover{ transform: translateY(-12px); box-shadow: 0 25px 60px rgba(0, 100, 255, 0.15); } /* ========================= COMMERCIAL IMAGE ========================= */ .commercial-image{ position: relative; overflow: hidden; } .commercial-image img{ width: 100%; height: 290px; object-fit: cover; transition: 0.5s ease; } .commercial-card:hover .commercial-image img{ transform: scale(1.08); } /* ========================= PRODUCT TAG ========================= */ .product-tag{ position: absolute; top: 20px; left: 20px; background: linear-gradient(135deg, #00cfff, #005eff); color: #ffffff; padding: 10px 18px; border-radius: 50px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 25px rgba(0, 140, 255, 0.25); } /* ========================= COMMERCIAL CONTENT ========================= */ .commercial-content{ padding: 32px; } .commercial-content h3{ font-size: 28px; color: #071c3d; margin-bottom: 18px; font-weight: 700; } .commercial-content p{ font-size: 15px; line-height: 1.9; color: #5b6b84; margin-bottom: 25px; } /* ========================= PRODUCT FEATURES ========================= */ .product-features{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; } .product-features li{ display: flex; align-items: center; gap: 12px; font-size: 15px; color: #23344f; font-weight: 500; } .product-features i{ color: #00bfff; } /* ========================= PRODUCT BUTTON ========================= */ .product-btn{ display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 16px 24px; border-radius: 14px; background: linear-gradient(135deg, #00cfff, #005eff); color: #ffffff; font-size: 15px; font-weight: 600; transition: 0.4s ease; box-shadow: 0 12px 30px rgba(0, 119, 255, 0.25); } .product-btn:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 119, 255, 0.35); } /* ========================= RESPONSIVE ========================= */ @media(max-width: 1200px){ .commercial-grid{ grid-template-columns: repeat(2, 1fr); } } @media(max-width: 992px){ .commercial-section{ padding: 100px 0; } .section-heading h2{ font-size: 42px; } } @media(max-width: 768px){ .commercial-grid{ grid-template-columns: 1fr; } .section-heading h2{ font-size: 34px; } .section-heading p{ font-size: 16px; } .commercial-content{ padding: 26px; } .commercial-content h3{ font-size: 24px; } } @media(max-width: 480px){ .commercial-section{ padding: 80px 0; } .section-heading{ margin-bottom: 50px; } .section-heading h2{ font-size: 28px; } .commercial-image img{ height: 240px; } .product-btn{ width: 100%; } } /* ========================= RO SPARE PARTS SECTION ========================= */ .spare-parts-section{ padding: 120px 0; background: linear-gradient( 180deg, #ffffff 0%, #f4fbff 100% ); position: relative; overflow: hidden; } /* ========================= BACKGROUND EFFECTS ========================= */ .spare-parts-section::before{ content: ''; position: absolute; width: 420px; height: 420px; background: rgba(0, 191, 255, 0.08); border-radius: 50%; top: -180px; left: -180px; filter: blur(40px); } .spare-parts-section::after{ content: ''; position: absolute; width: 350px; height: 350px; background: rgba(0, 94, 255, 0.06); border-radius: 50%; bottom: -140px; right: -140px; filter: blur(40px); } /* ========================= PARTS GRID ========================= */ .parts-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; z-index: 2; } /* ========================= PART CARD ========================= */ .part-card{ background: #ffffff; border-radius: 24px; overflow: hidden; transition: 0.45s ease; box-shadow: 0 15px 45px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); position: relative; } .part-card:hover{ transform: translateY(-12px); box-shadow: 0 25px 60px rgba(0, 140, 255, 0.16); } /* ========================= PART IMAGE ========================= */ .part-image{ overflow: hidden; position: relative; } .part-image img{ width: 100%; height: 240px; object-fit: cover; transition: 0.5s ease; } .part-card:hover .part-image img{ transform: scale(1.08); } /* ========================= PART CONTENT ========================= */ .part-content{ padding: 26px; } .part-content h3{ font-size: 24px; font-weight: 700; color: #071c3d; margin-bottom: 14px; } .part-content p{ font-size: 15px; line-height: 1.8; color: #5b6b84; margin-bottom: 24px; } /* ========================= PART BUTTON ========================= */ .part-btn{ display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 15px 22px; border-radius: 14px; background: linear-gradient(135deg, #00cfff, #005eff); color: #ffffff; font-size: 15px; font-weight: 600; transition: 0.4s ease; box-shadow: 0 12px 28px rgba(0, 119, 255, 0.22); } .part-btn:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 119, 255, 0.32); } /* ========================= RESPONSIVE ========================= */ @media(max-width: 1200px){ .parts-grid{ grid-template-columns: repeat(3, 1fr); } } @media(max-width: 992px){ .spare-parts-section{ padding: 100px 0; } .parts-grid{ grid-template-columns: repeat(2, 1fr); } } @media(max-width: 768px){ .parts-grid{ grid-template-columns: 1fr; } .part-content h3{ font-size: 22px; } .part-image img{ height: 260px; } } @media(max-width: 480px){ .spare-parts-section{ padding: 80px 0; } .part-content{ padding: 22px; } .part-content h3{ font-size: 20px; } .part-content p{ font-size: 14px; } .part-image img{ height: 220px; } } /* ========================= SERVICES SECTION ========================= */ .services-section{ padding: 120px 0; background: linear-gradient( 180deg, #f7fbff 0%, #ffffff 100% ); position: relative; overflow: hidden; } /* ========================= BACKGROUND EFFECTS ========================= */ .services-section::before{ content: ''; position: absolute; width: 420px; height: 420px; background: rgba(0, 207, 255, 0.06); border-radius: 50%; top: -160px; right: -160px; filter: blur(50px); } .services-section::after{ content: ''; position: absolute; width: 320px; height: 320px; background: rgba(0, 94, 255, 0.05); border-radius: 50%; bottom: -120px; left: -120px; filter: blur(50px); } /* ========================= SERVICES GRID ========================= */ .services-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; position: relative; z-index: 2; } /* ========================= SERVICE CARD ========================= */ .service-card{ background: #ffffff; border-radius: 28px; padding: 40px 32px; text-align: center; transition: 0.45s ease; box-shadow: 0 15px 45px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); position: relative; overflow: hidden; } .service-card::before{ content: ''; position: absolute; width: 100%; height: 5px; top: 0; left: 0; background: linear-gradient( 135deg, #00cfff, #005eff ); transform: scaleX(0); transform-origin: left; transition: 0.4s ease; } .service-card:hover::before{ transform: scaleX(1); } .service-card:hover{ transform: translateY(-12px); box-shadow: 0 25px 60px rgba(0, 119, 255, 0.14); } /* ========================= SERVICE ICON ========================= */ .service-icon{ width: 95px; height: 95px; margin: auto; margin-bottom: 28px; border-radius: 24px; background: linear-gradient( 135deg, #00cfff, #005eff ); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(0, 119, 255, 0.22); position: relative; } .service-icon::before{ content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 18px; } .service-icon i{ color: #ffffff; font-size: 38px; position: relative; z-index: 2; } /* ========================= SERVICE TITLE ========================= */ .service-card h3{ font-size: 28px; color: #071c3d; margin-bottom: 18px; font-weight: 700; } /* ========================= SERVICE TEXT ========================= */ .service-card p{ font-size: 15px; line-height: 1.9; color: #5b6b84; margin-bottom: 30px; } /* ========================= SERVICE BUTTON ========================= */ .service-btn{ display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border-radius: 50px; background: linear-gradient( 135deg, #00cfff, #005eff ); color: #ffffff; font-size: 15px; font-weight: 600; transition: 0.4s ease; box-shadow: 0 12px 28px rgba(0, 119, 255, 0.22); } .service-btn:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 119, 255, 0.32); } /* ========================= RESPONSIVE ========================= */ @media(max-width: 1200px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } } @media(max-width: 992px){ .services-section{ padding: 100px 0; } } @media(max-width: 768px){ .services-grid{ grid-template-columns: 1fr; } .service-card{ padding: 35px 28px; } .service-card h3{ font-size: 24px; } .service-icon{ width: 85px; height: 85px; } .service-icon i{ font-size: 32px; } } @media(max-width: 480px){ .services-section{ padding: 80px 0; } .service-card{ padding: 30px 22px; } .service-card h3{ font-size: 22px; } .service-card p{ font-size: 14px; } .service-btn{ width: 100%; } } /* ========================= WHY CHOOSE US SECTION ========================= */ .why-choose-section{ padding: 120px 0; background: linear-gradient( 180deg, #ffffff 0%, #f5fbff 100% ); position: relative; overflow: hidden; } /* ========================= BACKGROUND EFFECTS ========================= */ .why-choose-section::before{ content: ''; position: absolute; width: 420px; height: 420px; background: rgba(0, 207, 255, 0.06); border-radius: 50%; top: -180px; left: -180px; filter: blur(50px); } .why-choose-section::after{ content: ''; position: absolute; width: 320px; height: 320px; background: rgba(0, 94, 255, 0.05); border-radius: 50%; bottom: -120px; right: -120px; filter: blur(50px); } /* ========================= WHY GRID ========================= */ .why-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; z-index: 2; } /* ========================= WHY CARD ========================= */ .why-card{ background: #ffffff; border-radius: 28px; padding: 38px 28px; text-align: center; transition: 0.45s ease; box-shadow: 0 15px 45px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); position: relative; overflow: hidden; } .why-card::before{ content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 207, 255, 0.06), rgba(0, 94, 255, 0.03) ); opacity: 0; transition: 0.4s ease; } .why-card:hover::before{ opacity: 1; } .why-card:hover{ transform: translateY(-12px); box-shadow: 0 25px 60px rgba(0, 119, 255, 0.14); } /* ========================= WHY ICON ========================= */ .why-icon{ width: 90px; height: 90px; margin: auto; margin-bottom: 26px; border-radius: 24px; background: linear-gradient( 135deg, #00cfff, #005eff ); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 18px 40px rgba(0, 119, 255, 0.22); } .why-icon::before{ content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,0.2); border-radius: 18px; } .why-icon i{ color: #ffffff; font-size: 34px; position: relative; z-index: 2; } /* ========================= WHY TITLE ========================= */ .why-card h3{ font-size: 24px; color: #071c3d; margin-bottom: 16px; font-weight: 700; position: relative; z-index: 2; } /* ========================= WHY TEXT ========================= */ .why-card p{ font-size: 15px; line-height: 1.9; color: #5b6b84; position: relative; z-index: 2; } /* ========================= RESPONSIVE ========================= */ @media(max-width: 1200px){ .why-grid{ grid-template-columns: repeat(3, 1fr); } } @media(max-width: 992px){ .why-choose-section{ padding: 100px 0; } .why-grid{ grid-template-columns: repeat(2, 1fr); } } @media(max-width: 768px){ .why-grid{ grid-template-columns: 1fr; } .why-card{ padding: 34px 24px; } .why-card h3{ font-size: 22px; } .why-icon{ width: 82px; height: 82px; } .why-icon i{ font-size: 30px; } } @media(max-width: 480px){ .why-choose-section{ padding: 80px 0; } .why-card{ padding: 30px 22px; } .why-card h3{ font-size: 20px; } .why-card p{ font-size: 14px; } } /* ========================= TESTIMONIAL SECTION ========================= */ .testimonial-section{ padding: 120px 0; background: linear-gradient( 180deg, #f7fbff 0%, #ffffff 100% ); position: relative; overflow: hidden; } /* ========================= BACKGROUND EFFECTS ========================= */ .testimonial-section::before{ content: ''; position: absolute; width: 420px; height: 420px; background: rgba(0, 207, 255, 0.06); border-radius: 50%; top: -180px; right: -180px; filter: blur(50px); } .testimonial-section::after{ content: ''; position: absolute; width: 320px; height: 320px; background: rgba(0, 94, 255, 0.05); border-radius: 50%; bottom: -120px; left: -120px; filter: blur(50px); } /* ========================= TESTIMONIAL GRID ========================= */ .testimonial-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; z-index: 2; } /* ========================= TESTIMONIAL CARD ========================= */ .testimonial-card{ background: #ffffff; border-radius: 28px; padding: 34px 30px; transition: 0.45s ease; box-shadow: 0 15px 45px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); position: relative; overflow: hidden; } .testimonial-card::before{ content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 207, 255, 0.05), rgba(0, 94, 255, 0.03) ); opacity: 0; transition: 0.4s ease; } .testimonial-card:hover::before{ opacity: 1; } .testimonial-card:hover{ transform: translateY(-12px); box-shadow: 0 25px 60px rgba(0, 119, 255, 0.14); } /* ========================= TESTIMONIAL TOP ========================= */ .testimonial-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; position: relative; z-index: 2; } /* ========================= USER INFO ========================= */ .testimonial-user{ display: flex; align-items: center; gap: 16px; } .testimonial-user img{ width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(0, 170, 255, 0.12); } .user-info h4{ font-size: 19px; color: #071c3d; margin-bottom: 4px; font-weight: 700; } .user-info span{ font-size: 14px; color: #5b6b84; } /* ========================= QUOTE ICON ========================= */ .quote-icon{ width: 55px; height: 55px; border-radius: 18px; background: linear-gradient( 135deg, #00cfff, #005eff ); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(0, 119, 255, 0.2); } .quote-icon i{ color: #ffffff; font-size: 22px; } /* ========================= STARS ========================= */ .stars{ display: flex; align-items: center; gap: 6px; margin-bottom: 22px; position: relative; z-index: 2; } .stars i{ color: #ffb400; font-size: 16px; } /* ========================= TESTIMONIAL TEXT ========================= */ .testimonial-card p{ font-size: 15px; line-height: 1.9; color: #5b6b84; position: relative; z-index: 2; } /* ========================= RESPONSIVE ========================= */ @media(max-width: 1200px){ .testimonial-grid{ grid-template-columns: repeat(2, 1fr); } } @media(max-width: 992px){ .testimonial-section{ padding: 100px 0; } } @media(max-width: 768px){ .testimonial-grid{ grid-template-columns: 1fr; } .testimonial-card{ padding: 30px 24px; } .testimonial-user img{ width: 62px; height: 62px; } .user-info h4{ font-size: 18px; } } @media(max-width: 480px){ .testimonial-section{ padding: 80px 0; } .testimonial-top{ flex-direction: column; align-items: flex-start; gap: 18px; } .quote-icon{ width: 50px; height: 50px; } .testimonial-card p{ font-size: 14px; } } /* ========================= CTA SECTION ========================= */ .cta-section{ position: relative; padding: 110px 0; overflow: hidden; background: linear-gradient( 135deg, #02142f 0%, #032b63 45%, #004aad 75%, #00aaff 100% ); } /* ========================= BACKGROUND WAVES ========================= */ .cta-wave{ position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.28; } .wave-1{ width: 420px; height: 420px; background: #00d5ff; top: -180px; left: -140px; } .wave-2{ width: 380px; height: 380px; background: #005eff; bottom: -180px; right: -120px; } /* ========================= CTA WRAPPER ========================= */ .cta-wrapper{ position: relative; z-index: 2; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(18px); border-radius: 36px; padding: 60px 70px; display: flex; align-items: center; justify-content: space-between; gap: 50px; box-shadow: 0 25px 60px rgba(0,0,0,0.15); } /* ========================= CTA CONTENT ========================= */ .cta-content{ max-width: 700px; } .cta-badge{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 50px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); color: #ffffff; font-size: 14px; font-weight: 600; margin-bottom: 28px; } .cta-badge i{ color: #00d5ff; } /* ========================= CTA HEADING ========================= */ .cta-content h2{ font-size: 54px; line-height: 1.2; font-weight: 800; color: #ffffff; margin-bottom: 22px; } .cta-content h2 span{ color: #00d5ff; } /* ========================= CTA TEXT ========================= */ .cta-content p{ font-size: 17px; line-height: 1.9; color: #d8e8ff; } /* ========================= CTA BUTTONS ========================= */ .cta-buttons{ display: flex; flex-direction: column; gap: 20px; } /* ========================= PRIMARY BUTTON ========================= */ .cta-primary-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 240px; padding: 18px 32px; border-radius: 60px; background: linear-gradient( 135deg, #00d5ff, #005eff ); color: #ffffff; font-size: 16px; font-weight: 700; transition: 0.4s ease; box-shadow: 0 16px 40px rgba(0, 170, 255, 0.35); } .cta-primary-btn:hover{ transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0, 170, 255, 0.45); } /* ========================= SECONDARY BUTTON ========================= */ .cta-secondary-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 240px; padding: 18px 32px; border-radius: 60px; border: 2px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); color: #ffffff; font-size: 16px; font-weight: 700; transition: 0.4s ease; } .cta-secondary-btn:hover{ background: rgba(255,255,255,0.14); border-color: #00d5ff; transform: translateY(-5px); } /* ========================= RESPONSIVE ========================= */ @media(max-width: 1200px){ .cta-content h2{ font-size: 46px; } } @media(max-width: 992px){ .cta-section{ padding: 90px 0; } .cta-wrapper{ flex-direction: column; text-align: center; padding: 50px 40px; } .cta-buttons{ width: 100%; align-items: center; } .cta-content h2{ font-size: 40px; } } @media(max-width: 768px){ .cta-wrapper{ padding: 40px 28px; border-radius: 28px; } .cta-content h2{ font-size: 32px; } .cta-content p{ font-size: 15px; } .cta-primary-btn, .cta-secondary-btn{ width: 100%; } } @media(max-width: 480px){ .cta-section{ padding: 70px 0; } .cta-content h2{ font-size: 28px; } .cta-badge{ font-size: 13px; } } /* ========================= MOBILE MENU (768px) ========================= */ @media(max-width:768px){ .hamburger{ display: flex; z-index: 1001; } .nav-menu{ position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #081120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; transition: 0.4s ease; z-index: 1000; } .nav-menu.active{ right: 0; } .nav-menu a{ color: #fff; font-size: 20px; } }