/* Nexlotech Page Builder CSS - Post ID: 701 - Gen: 2026-01-29 17:42:57 */ /* Module: about-1 */ /* About 1 Module Styles */ /* 1. Hero Section */ .about-1-hero { position: relative; background-color: var(--bs-dark); background-image: var(--about-1-bg); background-size: var(--about-1-bg-size, cover); background-position: var(--about-1-bg-pos, center); background-repeat: no-repeat; padding: 180px 0 240px; /* Increased padding for more breathing room */ z-index: 1; color: var(--bs-white); overflow: hidden; /* Keep children contained */ } /* Overlay */ .about-1-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* Hero Content */ .about-1-hero-content { position: relative; z-index: 2; animation: fadeInUp 1s ease-out forwards; } /* Typography */ .about-1-subtitle span { font-size: 0.8rem; letter-spacing: 2px; font-weight: 600; text-transform: uppercase; background: color-mix(in srgb, var(--bs-white), transparent 90%); backdrop-filter: blur(4px); border-color: color-mix(in srgb, var(--bs-white), transparent 70%) !important; transition: all 0.3s ease; } .about-1-subtitle span:hover { background: color-mix(in srgb, var(--bs-white), transparent 80%); transform: translateY(-2px); } .about-1-headline { color: var(--about-1-head-color, var(--bs-white)); font-size: 3.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -1px; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .about-1-description { font-size: 1.25rem; line-height: 1.6; max-width: 700px; opacity: 0.9; font-weight: 300; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } /* 2. Overlapping Content Box */ .relative-container { position: relative; z-index: 10; } .about-1-content-box-wrapper { margin-top: -140px; /* Strong overlap */ margin-bottom: 80px; padding: 0 15px; animation: fadeInUp 1s ease-out 0.3s forwards; /* Delayed entrance */ opacity: 0; /* Forward fill will keep it visible after animation */ } .about-1-content-box { background: var(--bs-white); padding: 3rem 4rem; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; } /* Optional Top Accent Line */ .about-1-content-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)); opacity: 0.8; } .rich-text-content { font-size: 1.1rem; line-height: 1.8; color: var(--bs-body-color); } .rich-text-content p:last-child { margin-bottom: 0; } /* Keyframes */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 991px) { .about-1-headline { font-size: 3rem; } .about-1-content-box { padding: 3rem; } } @media (max-width: 768px) { .about-1-hero { padding: 140px 0 200px; } .about-1-headline { font-size: 2.25rem; } .about-1-description { font-size: 1.1rem; } .about-1-content-box-wrapper { margin-top: -100px; } .about-1-content-box { padding: 2rem; } } /* Module: about-2 */ /* About 2 Section Styles */ .about-2-title { color: var(--bs-heading-color); margin-bottom: 25px; line-height: 1.2; } .about-2-desc { color: var(--bs-body-color); margin-bottom: 35px; line-height: 1.7; font-size: 1.05rem; } .about-2-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; /* Row Gap, Col Gap */ margin-bottom: 40px; } .about-2-feature-item { font-size: 0.95rem; font-weight: 700; /* Bold text */ color: var(--bs-body-color); display: flex; align-items: center; } .about-2-feature-item::before { content: '★'; /* Simple star/bullet, or usage of icon font if available */ color: var(--theme-secondary); /* Orange Accent */ font-size: 12px; margin-right: 10px; background: color-mix(in srgb, var(--theme-secondary), transparent 90%); padding: 4px; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .btn-about-2 { background-color: var(--theme-primary); /* Teal Color matching image */ color: var(--bs-white); padding: 14px 40px; border-radius: 50px; text-decoration: none; font-weight: 600; display: inline-block; transition: transform 0.3s, background-color 0.3s; border: none; box-shadow: 0 5px 15px color-mix(in srgb, var(--theme-primary), transparent 70%); } .btn-about-2:hover { background-color: color-mix(in srgb, var(--theme-primary), black 10%); color: var(--bs-white); transform: translateY(-2px); } /* Image Composition */ .about-2-img-comp { position: relative; height: 100%; min-height: 500px; width: 100%; } .ab2-img-wrapper { position: absolute; transition: all 0.5s ease; } .ab2-img-wrapper img { display: block; width: 100%; height: auto; border: 8px solid var(--bs-white); /* Polaroid white border */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } /* Back Image (Large, Right) */ .ab2-img-1 { top: 20px; right: 20px; width: 62%; z-index: 1; transform: rotate(5deg); } /* Dotted Border for Img 1 */ .ab2-img-1::before { content: ''; position: absolute; inset: -12px; border: 2px dashed var(--bs-border-color); z-index: -1; transform: rotate(-3deg); border-radius: 2px; } /* Front Image (Small, Left) */ .ab2-img-2 { bottom: 20px; left: 20px; width: 50%; z-index: 2; transform: rotate(-4deg); } /* Dotted Border for Img 2 */ .ab2-img-2::before { content: ''; position: absolute; inset: -12px; border: 2px dashed var(--bs-border-color); z-index: -1; transform: rotate(3deg); border-radius: 2px; } @media (max-width: 991px) { .about-2-img-comp { min-height: 400px; margin-top: 50px; } } @media (max-width: 576px) { .about-2-features { grid-template-columns: 1fr; } .about-2-title { font-size: 2.2rem; } .about-2-img-comp { min-height: 300px; } } /* Module: vision-mission-cards */ /* Vision & Mission Cards Styles */ .vision-mission-section { padding: 60px 0; } .vision-mission-section .vm-card { background-color: var(--bs-light); border-radius: 20px; padding: 40px; height: 100%; transition: transform 0.3s ease; } .vision-mission-section .vm-card:hover { transform: translateY(-5px); } .vision-mission-section .vm-icon-wrapper { margin-bottom: 25px; } .vision-mission-section .vm-icon { width: 60px; height: 60px; object-fit: contain; } /* Default SVG Icon Style if no image */ .vision-mission-section .vm-icon-svg { width: 60px; height: 60px; color: var(--theme-primary); } .vision-mission-section .vm-title { color: var(--bs-heading-color); font-weight: 800; /* Extra bold */ font-size: 2rem; margin-bottom: 20px; letter-spacing: -0.02em; } .vision-mission-section .vm-desc { color: var(--bs-body-color); /* Grayish text */ font-size: 1.05rem; line-height: 1.6; font-weight: 500; }