/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Tags: one-column,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog,portfolio
Version: 2.8.1787070615
Updated: 2026-08-18 16:30:15

*/

:root {
            --bg-color: #080808;
            --card-bg: #121212;
            --accent-color: #d4af37;
            --text-main: #e5e5e5;
            --text-muted: #888;
            --border-dark: #222;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Times New Roman', serif; }
        
        /* Smooth Scrolling Enable */
        html { scroll-behavior: smooth; }

        body { background-color: var(--bg-color); color: var(--text-main); line-height: 1.5; overflow-x: hidden; }
        a { text-decoration: none; color: inherit; }

        /* Top Header */
        header { display: flex; justify-content: space-between; align-items: center; padding: 18px 5%; border-bottom: 1px solid var(--border-dark); background: var(--bg-color); position: sticky; top: 0; z-index: 1000; }
        .logo-box { display: flex; flex-direction: column; }
        .logo { font-size: 16px; font-weight: bold; letter-spacing: 3px; color: #fff; text-transform: uppercase; }
        .logo-sub { font-size: 7px; letter-spacing: 4px; color: var(--accent-color); font-family: sans-serif; }
        nav { display: flex; gap: 22px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-family: sans-serif; }
        nav a:hover { color: var(--accent-color); }
        .explore-top { border: 1px solid var(--accent-color); padding: 8px 16px; color: var(--accent-color); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-family: sans-serif; transition: 0.3s; }
        .explore-top:hover { background: var(--accent-color); color: #000; }

        /* Hero Section */
        .hero { display: flex; flex-wrap: wrap; align-items: center; padding: 50px 5%; gap: 40px; }
        .hero-content { flex: 1; min-width: 300px; }
        .sub-tag { color: var(--accent-color); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-family: sans-serif; margin-bottom: 12px; display: block; }
        .hero-content h1 { font-size: 52px; color: #fff; margin-bottom: 20px; font-weight: normal; line-height: 1.1; }
        .hero-content p { color: var(--text-muted); margin-bottom: 15px; font-size: 14px; font-family: sans-serif; }
        .hero-image-wrap { flex: 1; min-width: 300px; display: flex; justify-content: center; position: relative; }
        .hero-image-card { background: #111; border: 1px solid var(--border-dark); padding: 10px; transform: rotate(2deg); max-width: 400px; width: 100%; }
        .hero-image-card img { width: 100%; height: 420px; object-fit: cover; display: block; }
        .badge-box { position: absolute; bottom: 10px; left: -10px; background: #141414; border: 1px solid var(--border-dark); padding: 12px 18px; display: flex; gap: 12px; align-items: center; width: 220px; }
        .badge-number { font-size: 22px; color: var(--accent-color); font-family: serif; }
        .badge-text h4 { font-size: 12px; color: #fff; font-family: sans-serif; letter-spacing: 1px; }
        .badge-text p { font-size: 9px; color: var(--text-muted); font-family: sans-serif; }
        .explore-btn { border: 1px solid var(--accent-color); padding: 12px 24px; color: var(--accent-color); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-family: sans-serif; display: inline-block; margin-top: 10px; transition: 0.3s; }
        .explore-btn:hover { background: var(--accent-color); color: #000; }

        /* Shared Section Header */
        .section-header { text-align: center; padding: 50px 20px 20px; }
        .section-header span { color: var(--accent-color); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-family: sans-serif; }
        .section-header h2 { font-size: 38px; color: #fff; margin-top: 8px; font-weight: normal; }
        .section-header h2 span { font-style: italic; color: var(--accent-color); }
        .section-header p { max-width: 650px; margin: 12px auto 0; font-size: 13px; color: var(--text-muted); font-family: sans-serif; line-height: 1.6; }

        /* Profiles Grid */
        .profiles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 10px 5% 40px; }
        .profile-card { background: var(--card-bg); border: 1px solid var(--border-dark); padding: 10px; position: relative; }
        .tag-new { position: absolute; top: 16px; left: 16px; background: var(--accent-color); color: #000; font-size: 8px; font-family: sans-serif; padding: 2px 6px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
        .profile-card img { width: 100%; height: 280px; object-fit: cover; margin-bottom: 12px; }
        .profile-card h3 { font-size: 22px; color: #fff; margin-bottom: 4px; font-weight: normal; }
        .profile-card p { font-size: 11px; color: var(--accent-color); font-family: sans-serif; margin-bottom: 12px; }
        .whatsapp-btn { display: block; width: 100%; padding: 10px; background: transparent; border: 1px solid var(--accent-color); color: var(--accent-color); text-transform: uppercase; font-family: sans-serif; font-size: 10px; letter-spacing: 1px; text-align: center; transition: 0.3s; }
        .whatsapp-btn:hover { background: var(--accent-color); color: #000; }

        /* Detailed Features Section */
        .features-section { padding: 50px 5%; background: #080808; }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 40px; }
        .feature-box { background: var(--card-bg); border: 1px solid var(--border-dark); padding: 35px 25px; position: relative; }
        .feature-num-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .feature-num { font-size: 14px; color: var(--accent-color); font-family: sans-serif; letter-spacing: 1px; }
        .feature-star { width: 24px; height: 24px; border: 1px solid var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 12px; }
        .feature-box h3 { font-size: 26px; color: #fff; font-weight: normal; margin-bottom: 15px; line-height: 1.2; }
        .feature-box p { font-size: 13px; color: var(--text-muted); font-family: sans-serif; margin-bottom: 15px; line-height: 1.6; }

        /* Stand Out Showcase Grid */
        .standout-section { padding: 50px 5%; background: #070707; border-top: 1px solid var(--border-dark); }
        .standout-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 20px; }
        .standout-top h2 { font-size: 42px; color: #fff; font-weight: normal; max-width: 500px; line-height: 1.1; }
        .standout-top h2 span { font-style: italic; color: var(--accent-color); }
        .standout-top p { font-size: 13px; color: var(--text-muted); font-family: sans-serif; max-width: 450px; line-height: 1.6; }
        
        .standout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }
        .standout-card { background: var(--card-bg); border: 1px solid var(--border-dark); position: relative; overflow: hidden; display: flex; flex-direction: column; }
        .standout-card-img { position: relative; width: 100%; height: 380px; }
        .standout-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .standout-badge-num { position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-dark); color: #fff; font-size: 11px; font-family: sans-serif; padding: 4px 8px; }
        .standout-action-btn { position: absolute; bottom: 16px; right: 16px; width: 32px; height: 32px; border: 1px solid var(--accent-color); border-radius: 50%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 12px; }
        .standout-content { padding: 25px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .standout-content h3 { font-size: 24px; color: #fff; font-weight: normal; margin-bottom: 12px; }
        .standout-content p { font-size: 13px; color: var(--text-muted); font-family: sans-serif; line-height: 1.6; }

        /* Why People Choose Section */
        .why-choose-section { padding: 60px 5%; background: #060606; border-top: 1px solid var(--border-dark); }
        .why-choose-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; gap: 20px; border-bottom: 1px solid var(--border-dark); padding-bottom: 30px; }
        .why-choose-header .sub-tag { margin-bottom: 8px; }
        .why-choose-header h2 { font-size: 46px; color: #fff; font-weight: normal; max-width: 500px; line-height: 1.1; }
        .why-choose-header h2 span { font-style: italic; color: var(--accent-color); }
        .why-choose-header-text { max-width: 480px; font-size: 13px; color: var(--text-muted); font-family: sans-serif; line-height: 1.6; }
        
        .alt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-bottom: 60px; }
        .alt-row:nth-child(even) { flex-direction: row-reverse; }
        .alt-content { flex: 1; min-width: 300px; }
        .alt-content span { color: var(--accent-color); font-size: 11px; font-family: sans-serif; letter-spacing: 2px; display: block; margin-bottom: 10px; text-transform: uppercase; }
        .alt-content h3 { font-size: 32px; color: #fff; font-weight: normal; margin-bottom: 15px; line-height: 1.2; }
        .alt-content p { font-size: 13px; color: var(--text-muted); font-family: sans-serif; margin-bottom: 12px; line-height: 1.6; }
        .alt-image { flex: 1; min-width: 300px; position: relative; border: 1px solid var(--border-dark); background: var(--card-bg); padding: 8px; }
        .alt-image img { width: 100%; height: 350px; object-fit: cover; display: block; }

        /* FAQ Section */
        .faq-section { padding: 60px 5%; background: #080808; border-top: 1px solid var(--border-dark); }
        .faq-container { max-width: 800px; margin: 30px auto 0; }
        .faq-item { background: var(--card-bg); border: 1px solid var(--border-dark); margin-bottom: 15px; padding: 20px 25px; }
        .faq-question { font-size: 18px; color: #fff; margin-bottom: 8px; font-weight: normal; display: flex; justify-content: space-between; align-items: center; }
        .faq-answer { font-size: 13px; color: var(--text-muted); font-family: sans-serif; line-height: 1.6; }

        /* Blogs Section */
        .blogs-section { padding: 60px 5%; background: #060606; border-top: 1px solid var(--border-dark); }
        .blogs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 40px; margin-bottom: 40px; }
        .blog-card { background: var(--card-bg); border: 1px solid var(--border-dark); padding: 25px; display: flex; flex-direction: column; justify-content: space-between; transition: 0.3s; }
        .blog-card:hover { border-color: var(--accent-color); }
        .blog-date { font-size: 10px; color: var(--accent-color); text-transform: uppercase; letter-spacing: 2px; font-family: sans-serif; margin-bottom: 10px; display: block; }
        .blog-card h3 { font-size: 22px; color: #fff; font-weight: normal; margin-bottom: 12px; line-height: 1.3; }
        .blog-card p { font-size: 13px; color: var(--text-muted); font-family: sans-serif; margin-bottom: 20px; line-height: 1.6; }
        .blog-read-more { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-color); font-family: sans-serif; display: inline-flex; align-items: center; gap: 6px; }
        .blog-read-more:hover { text-decoration: underline; }
        .blogs-btn-container { text-align: center; }

        /* Footer */
        .site-footer { background-color: #060606; border-top: 1px solid var(--border-dark); padding: 60px 5% 100px; position: relative; }
        .footer-top-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 50px; }
        .footer-brand-col .sub-tag { margin-bottom: 12px; }
        .footer-brand-col h2 { font-size: 38px; color: #fff; font-weight: normal; line-height: 1.15; margin-bottom: 18px; }
        .footer-brand-col h2 span { font-style: italic; color: var(--accent-color); }
        .footer-brand-col p { font-size: 13px; color: var(--text-muted); font-family: sans-serif; line-height: 1.6; margin-bottom: 25px; max-width: 420px; }
        
        .footer-col-title { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-color); font-family: sans-serif; margin-bottom: 20px; display: block; font-weight: bold; }
        .footer-links-list { display: flex; flex-direction: column; gap: 12px; font-family: sans-serif; font-size: 13px; color: var(--text-muted); }
        .footer-links-list a:hover { color: var(--accent-color); }

        .footer-bottom-bar { border-top: 1px solid var(--border-dark); padding-top: 25px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-family: sans-serif; font-size: 12px; color: var(--text-muted); gap: 15px; }
        .footer-bottom-links { display: flex; gap: 20px; }
        .footer-bottom-links a:hover { color: var(--accent-color); }

        /* Floating Sticky Contact Action Bar */
        .footer-action-bar-wrapper { 
            position: fixed; 
            bottom: 20px; 
            left: 0; 
            width: 100%; 
            display: flex; 
            justify-content: center; 
            padding: 0 5%; 
            z-index: 9999; 
            pointer-events: none; 
        }
        .footer-action-bar { 
            pointer-events: auto; 
            background: #111; 
            border: 1px solid var(--accent-color); 
            padding: 10px; 
            display: flex; 
            gap: 12px; 
            border-radius: 12px; 
            width: 100%; 
            max-width: 450px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.9); 
        }
        .footer-btn-call { flex: 1; background: #d4af37; color: #000; border: none; padding: 12px 20px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-family: sans-serif; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; transition: 0.3s; }
        .footer-btn-call:hover { background: #c19b2e; }
        .footer-btn-wa { flex: 1; background: #198754; color: #fff; border: none; padding: 12px 20px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-family: sans-serif; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; transition: 0.3s; }
        .footer-btn-wa:hover { background: #146c43; }

        @media(max-width: 900px) {
            .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-brand-col { grid-column: 1 / -1; }
        }
        @media(max-width: 768px) {
            nav { display: none; }
            .hero-content h1 { font-size: 34px; }
            .badge-box { display: none; }
            .why-choose-header h2 { font-size: 34px; }
            .footer-top-grid { grid-template-columns: 1fr; }
            .footer-brand-col h2 { font-size: 30px; }
            .site-footer { padding-bottom: 120px; }
        }