/*
 Theme Name: Vextora
 Theme URI: digifyz.com/
 Author: Digifyz by IJM Consultancy
 Author URI: digifyz.com
 Description: Vextora is a feature-rich, multi-purpose WordPress theme designed for businesses, portfolios, etc. It offers advanced customizations, modern animations, and a responsive layout.
Version: 1.0
Requires PHP: 7.4
Tested up to: 6.4
License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: vextora
*/
/*
* Tags: custom-background, custom-header, custom-menu, featured-images, responsive-layout, block-editor-styles
 * Copyright © 2024 Digifyz by IJM Consultancy.
 * The Vextora theme is distributed under the GNU General Public License v2 or later.
 */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.hero {
    background: white;
    color: #3d52a0;
    padding: 50px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    position: relative;
}

.hero-content {
    max-width: 600px;
}

.hero h1 {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.hero p {
    font-size: 1em;
    color: #3d52a0;
    margin-bottom: 40px;

}



.hero .secondary-button {
    background: transparent;
    border: 2px solid #3d52a0;
    padding: 15px 30px;
    color: #3d52a0;
   
    border-radius: 30px;
    font-size: 1.2em;
    transition: 0.3s ease;
}

.hero .secondary-button:hover {
    background: #3d52a0;
    color: #ffffff;
}

.hero-image {
    width: 40%;
    height: auto;
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 768px) {
    .hero {
        flex-direction: column; /* Stack content vertically */
        text-align: center; /* Center-align for smaller screens */
        padding: 30px; /* Less padding on mobile */
    }

    .hero-content {
        margin-bottom: 20px; /* Add space below content */
    }

    .hero h1 {
        font-size: 2em; /* Smaller headline */
    }

    .hero p {
        font-size: 1em; /* Adjust paragraph size */
    }

    .hero-image {
        width: 70%; /* Image takes more space on smaller screens */
        margin-top: 30px;
    }
    
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8em; /* Even smaller font size for very small devices */
    }

    .hero .secondary-button {
        padding: 10px 20px; /* Adjust button padding */
        font-size: 1em; /* Smaller button text */
      
    }

    .hero-image {
        width: 80%; /* Image almost full-width on mobile */
        margin-top: 30px;
    }
}