/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Apply styles to the entire body */
body {
    font-family: 'Montserrat', sans-serif; /* Your chosen font */
    color: white; /* Text color */
    height: 100vh; /* Ensures the body takes up the full height of the viewport */
    margin: 0; /* Removes default body margin */
    display: flex; /* To center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center; /* Center text */
    position: relative; /* Required for absolute positioning of the background image */
    background-color: #1a1a1a; /* Dark shade background for body */
}

/* Hero section styling */
.hero {
    background: linear-gradient(45deg, #E79024 30%, #273F79 70%); /* Gradient background */
    padding: 80px 20px 20px 20px; /* Increase top padding for the logo */
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
    position: relative; /* Required to position the logo */
}
/* Pseudo-element for grayscale background image */

/* Hero section styling */
.hero {
    background: linear-gradient(45deg, #E79024 30%, #273F79 70%); /* Gradient background */
    padding: 80px 20px 20px 20px; /* Increase top padding for the logo */
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
    position: relative; /* Required to position the logo */
}

/* Logo Styling */
.hero-logo {
    position: absolute; /* Absolute positioning to place the logo */
    top: 20px; /* Adjust top position to give more space */
    left: 50%; /* Horizontally center the logo */
    transform: translateX(-50%); /* Adjust for true centering */
    max-width: 150px; /* Control the size of the logo */
    height: auto; /* Keep the logo's aspect ratio */
}

/* Headline Styling */
h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 10px; /* Added margin-top to give space between the logo and the text */
    color: white;
}

/* Paragraph Styling */
p {
    font-size: 1.2em;
    margin-bottom: 40px;
    color: #ddd;
}

/* CTA Button Container */
.cta-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* General button styles */
.cta-btn {
    display: inline-flex; /* Use inline-flex to align text and icon */
    align-items: center; /* Vertically align the text and icon */
    justify-content: center; /* Center horizontally */
    padding: 15px 30px;
    font-size: 1.3em;
    text-decoration: none;
    border-radius: 30px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center; /* Ensures that the text is aligned */
}

/* Primary button styles */
.cta-primary {
    background-color: #273F79;
    color: white;
    border: 2px solid #273F79;
}

/* Secondary button styles */
.cta-secondary {
    background-color: #E79024;
    color: white;
    border: 2px solid #E79024;
}

/* Hover effects for buttons */
.cta-btn:hover {
    transform: scale(1.1);
}

/* Style for the icon inside the button */
.cta-btn .cta-icon {
    width: 20px; /* Adjust the icon size */
    height: 20px; /* Adjust the icon size */
    margin-left: 10px; /* Space between text and icon */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(10px); /* Initially off-screen */
}

/* Show the icon on hover */
.cta-btn:hover .cta-icon {
    opacity: 1;
    transform: translateX(0); /* Bring the icon into view */
}

/* Countdown Text Style */
.countdown-text {
    font-size: 1.1em;
    color: #ddd;
    margin-top: 20px;
    font-weight: 500;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .hero {
        padding: 80px 20px 20px 20px; /* Adjust padding for smaller devices */
    }

    h1 {
        font-size: 2.5em;
    }

    .cta-btn {
        font-size: 1.1em;
    }
}