<?php
/**
 * Title: front-page
 * Slug: markegol/front-page
 * Inserter: no
 */
?>
<!-- wp:group {"tagName":"main","metadata":{"name":"main"},"layout":{"type":"constrained"}} -->
<main class="wp-block-group"><!-- wp:group {"metadata":{"name":"Hero-Section"},"align":"full","style":{"color":{"background":"#110b01"},"background":{"backgroundImage":{"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/fundo.png","id":44,"source":"file","title":"fundo"},"backgroundSize":"cover","backgroundPosition":"64% 49%"}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#110b01"><!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"0"}}},"layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-group" style="padding-top:0"><!-- wp:columns {"verticalAlignment":null} -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","fontSize":"23px"},"spacing":{"padding":{"top":"var:preset|spacing|50"}},"elements":{"link":{"color":{"text":"#e742ff"}}},"color":{"text":"#e742ff"}}} -->
<h2 class="wp-block-heading has-text-color has-link-color" style="color:#e742ff;padding-top:var(--wp--preset--spacing--50);font-size:23px;font-style:normal;font-weight:500"><?php esc_html_e('Be on top of the world', 'markegol');?></h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"typography":{"fontSize":"100px"}}} -->
<h2 class="wp-block-heading" style="font-size:100px"><?php /* Translators: 1. is the start of a 'mark' HTML element, 2. is the end of a 'mark' HTML element */ 
echo sprintf( esc_html__( 'Markegol Digital %1$sAgency %2$s', 'markegol' ), '<mark style="background-color:rgba(0, 0, 0, 0);color:#ff00fc" class="has-inline-color">', '</mark>' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}},"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size" style="padding-top:var(--wp--preset--spacing--50);font-style:normal;font-weight:500"><?php /* Translators: 1. is the start of a 'mark' HTML element, 2. is the end of a 'mark' HTML element */ 
echo sprintf( esc_html__( '%1$s•%2$s Consultancy ', 'markegol' ), '<mark style="background-color:rgba(0, 0, 0, 0);color:#ff00fc" class="has-inline-color">', '</mark>' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"},"spacing":{"padding":{"top":"var:preset|spacing|20"}}},"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size" style="padding-top:var(--wp--preset--spacing--20);font-style:normal;font-weight:500"><?php /* Translators: 1. is the start of a 'mark' HTML element, 2. is the end of a 'mark' HTML element */ 
echo sprintf( esc_html__( '%1$s•%2$s Development', 'markegol' ), '<mark style="background-color:rgba(0, 0, 0, 0);color:#ff00fc" class="has-inline-color">', '</mark>' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|light-gray"}}},"spacing":{"padding":{"top":"var:preset|spacing|40"}}},"textColor":"light-gray","fontSize":"medium"} -->
<p class="has-light-gray-color has-text-color has-link-color has-medium-font-size" style="padding-top:var(--wp--preset--spacing--40)"><?php esc_html_e('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium ligula a mattis tincidunt. Maecenas iaculis venenatis leo nec dictum. Nulla eget leo feugiat elit convallis varius sit amet vel purus. Ut sit amet tellus eu odio hendrerit lacinia eget non massa. Integer diam sem, sagittis placerat egestas varius,', 'markegol');?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
<div class="wp-block-buttons" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:button {"style":{"border":{"radius":"27px"},"typography":{"fontStyle":"normal","fontWeight":"500"},"color":{"gradient":"linear-gradient(135deg,rgb(162,7,227) 0%,rgb(255,0,235) 100%)"}},"fontSize":"medium"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background has-medium-font-size has-custom-font-size wp-element-button" style="border-radius:27px;background:linear-gradient(135deg,rgb(162,7,227) 0%,rgb(255,0,235) 100%);font-style:normal;font-weight:500"><?php esc_html_e('Get in touch', 'markegol');?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-top:0;padding-bottom:0"><!-- wp:image {"width":"auto","height":"750px","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/administrator-eyeglasses-vision-agent-assistant-boss-1674978-pxhere.com-alt-3a.png" alt="" class="" style="width:auto;height:750px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"About-Section"},"align":"full","className":"padding-all","style":{"spacing":{"padding":{"top":"5vw","bottom":"5vw","left":"10%","right":"10%"}},"color":{"background":"#170014"}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull padding-all has-background" style="background-color:#170014;padding-top:5vw;padding-right:10%;padding-bottom:5vw;padding-left:10%"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}},"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size" style="padding-top:var(--wp--preset--spacing--50);font-style:normal;font-weight:500"><?php /* Translators: 1. is the start of a 'mark' HTML element, 2. is the end of a 'mark' HTML element */ 
echo sprintf( esc_html__( '%1$s•%2$s That\'s how we can hell you', 'markegol' ), '<mark style="background-color:rgba(0, 0, 0, 0);color:#ff00fc" class="has-inline-color">', '</mark>' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","style":{"spacing":{"padding":{"bottom":"24px"}},"typography":{"fontSize":"25px"},"elements":{"link":{"color":{"text":"var:preset|color|light-gray"}}}},"textColor":"light-gray"} -->
<p class="has-text-align-left has-light-gray-color has-text-color has-link-color" style="padding-bottom:24px;font-size:25px"><?php /* Translators: 1. is a 'br' HTML element, 2. is a 'br' HTML element, 3. is a 'br' HTML element, 4. is a 'br' HTML element */ 
echo sprintf( esc_html__( 'Markegol is not just another design agency it’s a creative and also%1$sinnovative to helping businesses amplify their growth through%2$sexceptional design solutions. At Markegol, the mission is clear to%3$scraft designs that are stunning but also strategically aligned with%4$sthe goals and values of our team and clients', 'markegol' ), '<br>', '<br>', '<br>', '<br>' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"},"blockGap":{"left":"var:preset|spacing|70"}}}} -->
<div class="wp-block-buttons" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:button {"style":{"border":{"radius":"27px"},"typography":{"fontStyle":"normal","fontWeight":"500"},"color":{"gradient":"linear-gradient(135deg,rgb(162,7,227) 0%,rgb(255,0,235) 100%)"}},"fontSize":"medium"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background has-medium-font-size has-custom-font-size wp-element-button" style="border-radius:27px;background:linear-gradient(135deg,rgb(162,7,227) 0%,rgb(255,0,235) 100%);font-style:normal;font-weight:500"><?php esc_html_e('Get in touch', 'markegol');?></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black-rich","style":{"border":{"radius":"27px"},"typography":{"fontStyle":"normal","fontWeight":"500"},"elements":{"link":{"color":{"text":"var:preset|color|black-rich"}}}},"fontSize":"medium"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-black-rich-color has-white-background-color has-text-color has-background has-link-color has-medium-font-size has-custom-font-size wp-element-button" style="border-radius:27px;font-style:normal;font-weight:500"><?php esc_html_e('Get in touch', 'markegol');?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Blog-Section"},"align":"full","className":"scroll-container padding-all","style":{"spacing":{"padding":{"top":"5vw","bottom":"5vw","left":"10%","right":"10%"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull scroll-container padding-all" style="padding-top:5vw;padding-right:10%;padding-bottom:5vw;padding-left:10%"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"bottom"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontSize":"80px","fontStyle":"normal","fontWeight":"500"}}} -->
<h2 class="wp-block-heading" style="font-size:80px;font-style:normal;font-weight:500"><?php /* Translators: 1. is a 'br' HTML element, 2. is the start of a 'mark' HTML element, 3. is the end of a 'mark' HTML element */ 
echo sprintf( esc_html__( 'Our Digital%1$s%2$sfeatured blog%3$s', 'markegol' ), '<br>', '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-orange-color">', '</mark>' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:group {"className":"buttom-animation","style":{"border":{"width":"1px","color":"#ffffff","radius":"30px"},"spacing":{"padding":{"top":"12px","bottom":"12px","left":"16px","right":"16px"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group buttom-animation has-border-color" style="border-color:#ffffff;border-width:1px;border-radius:30px;padding-top:12px;padding-right:16px;padding-bottom:12px;padding-left:16px"><!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"}}} -->
<p style="font-size:18px"><?php esc_html_e('View Blog', 'markegol');?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:query {"queryId":22,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"taxQuery":null,"parents":[],"format":[]},"className":"scroll-section"} -->
<div class="wp-block-query scroll-section"><!-- wp:post-template {"className":"panel","layout":{"type":"grid","columnCount":4}} -->
<!-- wp:post-featured-image {"isLink":true,"height":"250px","linkTarget":"_blank","style":{"border":{"radius":"20px"}}} /-->

<!-- wp:post-date /-->

<!-- wp:post-title {"style":{"typography":{"fontSize":"24px","fontStyle":"normal","fontWeight":"500"}}} /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Contact-Section"},"align":"full","className":"padding-all","style":{"spacing":{"padding":{"top":"5vw","bottom":"5vw","left":"10%","right":"10%"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull padding-all" style="padding-top:5vw;padding-right:10%;padding-bottom:5vw;padding-left:10%"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","fontSize":"40px"}}} -->
<h2 class="wp-block-heading" style="font-size:40px;font-style:normal;font-weight:500"><?php esc_html_e('Contact us', 'markegol');?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php /* Translators: 1. is a 'br' HTML element */ 
echo sprintf( esc_html__( 'Want to get in touch with our services?%1$sSend us Email!', 'markegol' ), '<br>' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            background-color: #1a1a1a;
            color: white;
            padding: 40px;
            font-family: Arial, sans-serif;
            min-height: 20vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-wrapper {
            width: 100%;
            max-width: 800px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group.full-width {
            grid-column: 1 / -1;
        }

        label {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: white;
        }

        input, textarea {
            background-color: #2a2a2a;
            border: none;
            border-radius: 8px;
            padding: 15px;
            color: #888;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        input:focus, textarea:focus {
            outline: none;
            background-color: #333;
            color: white;
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        .submit-btn {
            background: var(--wp--preset--color--orange) !important;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
        }

        .submit-btn:hover {
            background: var(--wp--preset--color--orange) !important;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .container {
                padding: 20px;
            }
        }
    </style>

<div class="container">
    <div class="form-wrapper">
        <form>
            <div class="form-grid">
                <div class="form-group">
                    <label for="name"><?php esc_html_e('Name', 'markegol');?></label>
                    <input type="text" id="name" name="name" placeholder="Type here..">
                </div>
                
                <div class="form-group">
                    <label for="email"><?php esc_html_e('Email', 'markegol');?></label>
                    <input type="email" id="email" name="email" placeholder="Type here..">
                </div>
                
                <div class="form-group">
                    <label for="phone"><?php esc_html_e('Phone', 'markegol');?></label>
                    <input type="tel" id="phone" name="phone" placeholder="Type here..">
                </div>
                
                <div class="form-group">
                    <label for="subject"><?php esc_html_e('Subject', 'markegol');?></label>
                    <input type="text" id="subject" name="subject" placeholder="Type here..">
                </div>
                
                <div class="form-group full-width">
                    <label for="message"><?php esc_html_e('Message', 'markegol');?></label>
                    <textarea id="message" name="message" placeholder="Write Message.."></textarea>
                </div>
            </div>
            
            <button type="submit" class="submit-btn"><?php esc_html_e('Send Message', 'markegol');?></button>
        </form>
    </div>
</div>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->