/* Nexlotech Page Builder CSS - Post ID: 1175 - Gen: 2026-01-30 03:58:12 */ /* Module: hero-video-tabs */ /* Hero Video Tabs Styles */ .hero-video-tabs-section { position: relative; width: 100%; min-height: 85vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; color: var(--bs-white); } .hvt-bg-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .hvt-bg-video-iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; transform: translate(-50%, -50%); pointer-events: none; } /* Updated Overlay with Gradient */ .hvt-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* background-color: var(--hvt-overlay-color, black); */ /* opacity: var(--hvt-overlay-opacity, 0.4); */ z-index: 1; } .hvt-content { position: relative; z-index: 3; /* Increased z-index to sit above gradients */ padding-bottom: 100px; } .hvt-title { font-weight: 700; margin-bottom: 20px; color: var(--bs-white); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .hvt-desc { font-size: 1.25rem; max-width: 700px; margin: 0 auto 30px; line-height: 1.6; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); } .hvt-bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10; background: color-mix(in srgb, black, transparent 20%); border-top: 1px solid rgba(255, 255, 255, 0.1); /* Allow expanding cards to overflow upwards if needed */ } .hvt-tabs-grid { display: flex; width: 100%; } .hvt-tab-item { flex: 1; position: relative; /* Remove padding to let popup card fill */ padding: 0; height: 140px; /* Fixed height for Desktop */ min-height: 140px; border-right: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; /* Background logic moves to popup card */ } .hvt-tab-item:last-child { border-right: none; } /* Mobile Elements */ .hvt-tab-eyebrow, .hvt-tab-label { /* Styles for Mobile spans */ } /* Unified Popup Card (Desktop) */ .hvt-popup-card { position: absolute; bottom: 0; left: 0; width: 100%; height: 140px; /* Explicit initial height to match tab */ background-color: transparent; overflow: hidden; transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: none; z-index: 5; /* Ensure it sits above tab base */ } .hvt-tab-item:hover .hvt-popup-card { height: 250px; /* Reduced hover height for a slimmer expansion */ background-color: var(--bs-dark); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); z-index: 20; /* Ensure it stays on top */ } .hvt-popup-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; } .hvt-tab-item:hover .hvt-popup-bg { opacity: 1; } .hvt-popup-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .hvt-tab-item:hover .hvt-popup-card::after { opacity: 1; } .hvt-popup-content { position: relative; z-index: 2; padding: 20px; height: 100%; display: flex; flex-direction: column; justify-content: center; /* Center content vertically in the strip */ text-align: center; align-items: center; transition: all 0.3s ease; } /* Internal Popup Elements */ .hvt-popup-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; padding: 5px 10px; border-radius: 2px; /* Sharper corners like the reference */ margin-bottom: 15px; font-weight: 800; line-height: 1; display: inline-block; } .hvt-popup-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0; /* Remove margin initially to center perfectly */ line-height: 1.1; color: white; transition: margin-bottom 0.3s ease; } /* Description Hidden Initially */ .hvt-popup-desc { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0; max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; } /* Hover States */ .hvt-tab-item:hover .hvt-popup-content { justify-content: flex-end; /* Push to bottom on hover reveal */ padding-bottom: 40px; } .hvt-tab-item:hover .hvt-popup-title { margin-bottom: 15px; } .hvt-tab-item:hover .hvt-popup-desc { max-height: 150px; opacity: 1; margin-bottom: 10px; } @media (max-width: 991px) { .hvt-title { font-size: 2.2rem !important; margin-bottom: 15px; } .hvt-desc { display: none !important; } .hvt-content .btn { display: none !important; } .hvt-bottom-bar { position: relative; } .hvt-tabs-grid { flex-direction: column; } .hvt-tab-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 20px; min-height: auto; height: 150px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; text-align: center; } .hvt-mobile-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(0.6); } .hvt-tab-eyebrow { position: relative; z-index: 2; display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 5px; opacity: 1; color: white; } .hvt-tab-label { position: relative; z-index: 2; display: block; font-size: 1.2rem; font-weight: 700; color: white; } .hvt-popup-card { display: none !important; } } /* Module: about-3 */ /* About 3 Module Styles */ .about-3-section { padding: 80px 0; background-color: #fff; overflow: hidden; } .about-3-images-wrapper { position: relative; padding-bottom: 50px; /* Space for the floating elements */ padding-right: 30px; } .about-3-main-img-box { width: 80%; border-radius: 20px; overflow: hidden; position: relative; z-index: 1; } .about-3-main-img-box img { width: 100%; height: auto; display: block; object-fit: cover; } .about-3-sub-img-box { position: absolute; bottom: 0; left: 0; width: 50%; border: 10px solid var(--bs-white); border-radius: 20px; overflow: hidden; z-index: 2; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-3-sub-img-box img { width: 100%; height: auto; display: block; } .about-3-badge { position: absolute; bottom: 20px; right: 20%; /* Adjust based on design */ width: 160px; height: 160px; background-color: var(--theme-secondary, #6a11cb); color: var(--bs-white); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; border: 8px solid var(--bs-white); box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.3); /* Animation */ animation: about3Float 4s ease-in-out infinite; } @keyframes about3Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .about-3-badge-count { font-size: 28px; font-weight: 700; line-height: 1.2; display: block; } .about-3-badge-label { font-size: 14px; opacity: 0.9; margin-top: 5px; display: block; } /* Content Side */ .about-3-content { padding-left: 30px; } .about-3-subtitle { display: inline-flex; align-items: center; gap: 8px; color: var(--bs-primary); font-weight: 600; font-size: 16px; margin-bottom: 15px; } .about-3-subtitle i, .about-3-subtitle svg { font-size: 18px; } .about-3-title { font-size: 42px; font-weight: 700; color: #1a1a1a; line-height: 1.2; margin-bottom: 20px; } .about-3-description { color: #666; font-size: 16px; line-height: 1.7; margin-bottom: 40px; } /* Feature List */ .about-3-features { display: flex; flex-direction: column; gap: 30px; } .about-3-feature-item { display: flex; align-items: flex-start; gap: 20px; } .about-3-icon-box { width: 60px; height: 60px; flex-shrink: 0; background-color: rgba(var(--bs-primary-rgb), 0.1); /* Light purple tint */ border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bs-primary); font-size: 24px; transition: all 0.3s ease; } .about-3-feature-item:hover .about-3-icon-box { background-color: var(--bs-primary); color: #fff; } .about-3-icon-box img { width: 30px; height: 30px; object-fit: contain; } .about-3-feature-content h4 { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; } .about-3-feature-content p { color: #666; font-size: 15px; line-height: 1.6; margin: 0; } /* Responsive */ @media (max-width: 991px) { .about-3-content { padding-left: 0; margin-top: 50px; } .about-3-images-wrapper { text-align: center; max-width: 500px; margin: 0 auto; } .about-3-title { font-size: 32px; } } @media (max-width: 767px) { .about-3-images-wrapper { padding-right: 0; padding-bottom: 0; /* Let the badge overflow */ margin-bottom: 70px; /* Space for badge */ max-width: 100%; width: 100%; } .about-3-main-img-box { width: 100%; border-radius: 15px; } .about-3-sub-img-box { display: none; } .about-3-badge { width: 140px; height: 140px; right: auto; left: 50%; bottom: 0; transform: translate(-50%, 50%); /* Move down by 50% of height to overlap bottom edge */ animation: none; /* Disable float animation on mobile for stability */ border-width: 5px; /* Reduce border to verify space */ } .about-3-badge-count { font-size: 20px; } .about-3-badge-label { font-size: 12px; } } /* Module: service-cards-modern */ .scm-section { padding: 60px 0; overflow: hidden; /* For slider overflow safety */ } .scm-card { position: relative; /* height: 450px; Remove fixed height */ aspect-ratio: 3 / 4; /* Modern vertical proportion */ height: auto; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .scm-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } /* Background Image */ .scm-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s ease; z-index: 1; } .scm-card:hover .scm-bg-image { transform: scale(1.1); } /* Overlay Gradient */ .scm-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.9) 100%); z-index: 2; transition: opacity 0.3s ease; } /* Content */ .scm-content { position: relative; z-index: 3; padding: 30px; color: var(--bs-white); } /* Icon */ .scm-icon-wrapper { width: 50px; height: 50px; background-color: var(--theme-accent); /* Default Yellow */ border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .scm-icon { width: 24px; height: 24px; object-fit: contain; filter: brightness(0); /* Make black if using colored icons, or remove if using svgs explicitly */ } /* Typography */ .scm-title { font-size: 1.25rem; font-weight: 700; color: var(--bs-white); margin-bottom: 12px; line-height: 1.3; } .scm-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Read More */ .scm-read-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--theme-accent); text-transform: capitalize; transition: gap 0.3s ease; } .scm-card:hover .scm-read-more { gap: 12px; } .scm-arrow { width: 12px; height: 12px; fill: currentColor; } /* Module: testimonial-1 */ .tm1-wrapper { padding-bottom: 30px; /* Space for pagination */ } /* Card */ .tm1-card { background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: row; /* Default: Side by Side */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* Soft shadow */ height: 100%; min-height: 280px; } /* Left Image Side */ .tm1-img-col { width: 40%; background-size: cover; background-position: center; position: relative; min-height: 250px; } /* Right Content Side */ .tm1-content-col { width: 60%; padding: 30px; display: flex; flex-direction: column; justify-content: center; } /* Stars */ .tm1-stars { color: var(--bs-secondary); /* Gold/Yellow */ font-size: 1rem; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; } /* Quote Icon */ .tm1-quote-icon { font-size: 3rem; color: var(--bs-light); /* Very light grey */ line-height: 0; font-family: serif; font-weight: 700; } /* Quote Text */ .tm1-quote { font-size: 1.05rem; color: var(--bs-body-color); line-height: 1.6; font-weight: 500; margin-bottom: 25px; } /* Author Info */ .tm1-author { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--bs-border-color); } .tm1-name { font-weight: 700; color: var(--bs-heading-color); font-size: 1.1rem; margin-bottom: 2px; } .tm1-role { font-size: 0.9rem; color: var(--bs-body-color); } /* Swiper Pagination Customization */ .tm1-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--bs-border-color); opacity: 1; transition: all 0.3s; } .tm1-swiper .swiper-pagination-bullet-active { background: var(--theme-secondary); width: 30px; border-radius: 5px; } /* Responsive */ @media (max-width: 768px) { .tm1-card { flex-direction: column; } .tm1-img-col { width: 100%; height: 250px; } .tm1-content-col { width: 100%; padding: 25px; } } /* Module: post-grid-farm */ .pgf-section { padding: 60px 0; } .pgf-subtitle-wrapper { display: inline-block; background: var(--bs-light); border: 1px solid var(--bs-border-color); border-radius: 50px; padding: 5px 15px; margin-bottom: 15px; } .pgf-subtitle { font-size: 0.85rem; font-weight: 600; color: var(--bs-body-color); text-transform: uppercase; letter-spacing: 0.5px; } .pgf-title { font-size: 2.5rem; font-weight: 800; color: var(--bs-heading-color); line-height: 1.2; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; } .pgf-card { background-color: var(--bs-light); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; } .pgf-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .pgf-image-wrapper { position: relative; width: 100%; padding-top: 65%; /* Aspect Ratio */ overflow: hidden; } .pgf-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .pgf-card:hover .pgf-image-wrapper img { transform: scale(1.05); } .pgf-content { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; } .pgf-post-title { font-size: 1.25rem; font-weight: 700; color: var(--bs-heading-color); margin-bottom: 12px; line-height: 1.4; } .pgf-post-title a { text-decoration: none; color: inherit; transition: color 0.2s; } .pgf-post-title a:hover { color: var(--theme-primary); } .pgf-excerpt { font-size: 0.95rem; color: var(--bs-body-color); line-height: 1.6; margin-bottom: 20px; } .pgf-footer { margin-top: auto; } .pgf-btn { display: block; width: 100%; background-color: var(--theme-primary); color: var(--bs-white); font-weight: 600; text-align: center; padding: 14px 0; text-decoration: none; transition: background-color 0.3s ease; border-radius: 0 0 16px 16px; } .pgf-btn-full { background: var(--theme-primary); color: var(--bs-white); font-weight: 600; text-align: center; padding: 15px; display: block; text-decoration: none; } .pgf-btn-full:hover { background: var(--theme-secondary); color: var(--bs-white); }