/* Nexlotech Page Builder CSS - Post ID: 701 - Gen: 2025-12-24 08:48:38 */ /* Module: about-1 */ /* About 1 Module Styles */ .about-1-hero { position: relative; background-color: #222; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 160px 0 260px; /* Deep padding to allow overlap */ color: #fff; } .about-1-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } /* Content Box Overlap */ .about-1-content-box { position: relative; margin-top: -160px; /* Overlaps the bottom of the hero */ background: #fff; padding: 60px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); z-index: 10; border-radius: 4px; margin-bottom: 60px; color: #333; line-height: 1.8; font-size: 1rem; } /* Typography */ .about-1-subtitle { font-size: 0.85rem; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem; opacity: 0.9; } .about-1-headline { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; } @media (max-width: 768px) { .about-1-headline { font-size: 2.5rem; } .about-1-content-box { padding: 30px; margin-top: -100px; } } /* Module: about-2 */ /* About 2 Section Styles */ .about-2-section { padding: 100px 0; overflow: hidden; background-color: #fff; } .about-2-title { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 800; color: #222; margin-bottom: 25px; line-height: 1.2; } .about-2-desc { color: #666; 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: #333; display: flex; align-items: center; } .about-2-feature-item::before { content: '★'; /* Simple star/bullet, or usage of icon font if available */ color: #E85E26; /* Orange Accent */ font-size: 12px; margin-right: 10px; background: rgba(232, 94, 38, 0.1); padding: 4px; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .btn-about-2 { background-color: #17A2B8; /* Teal Color matching image */ color: #fff; 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 rgba(23, 162, 184, 0.3); } .btn-about-2:hover { background-color: #138496; color: #fff; 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 #fff; /* 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 #ccc; 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 #ccc; 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; } }