* {
    margin: 0;
    /* Removes the default outer spacing applied by browsers */

    padding: 0;
    /* Removes the default inner spacing applied by browsers */

    box-sizing: border-box;
    /* Includes padding and borders within the element's total width and height */
}

/* body */

body {
    margin: 0;
    /* Removes the default body margin */

    font-family: Arial, sans-serif;
    /* Sets the default font family */

    background-color: #0F172A;
    /* Applies the main background color */

    color: #FFFFFF;
    /* Sets the default text color */

    line-height: 1.6;
    /* Improves text readability */
}


/* Container*/

.container {
    width: 100%;
    /* Uses 100% of the available viewport width */

    max-width: 1200px;
    /* Prevents the content from becoming too wide on large screens */

    margin: 0 auto;
    /* Centers the container horizontally */

    padding-inline: 20px;
    /* Adds horizontal spacing on the left and right */
}

/* Hero section */
.hero {

    min-height: calc(100vh - 70px);
    /* Makes the Hero section fill the viewport height minus the navbar height */

    display: flex;
    /* Enables Flexbox for easy content alignment */

    align-items: center;
    /* Vertically centers the Hero content */

    padding: 0;
    /* Removes extra spacing inside the Hero section */

}



/* Hero Content */

.hero-content {

    text-align: center;
    /* Horizontally centers all text inside the Hero */

}


.hero-badge {

    display: inline-block;
    /* Allows padding, margin and border-radius to work correctly */

    background-color: #2563EB;
    /* Sets the badge background color */

    color: #FFFFFF;
    /* Sets the badge text color */

    padding: 0.5rem 1rem;
    /* Creates internal spacing around the badge text */

    border-radius: 20px;
    /* Gives the badge rounded corners */

    font-size: 0.9rem;
    /* Reduces the badge text size */

    margin-bottom: 1.5rem;
    /* Adds spacing below the badge */

}

/* Hero Title */

.hero-title {

    font-size: 2.5rem;
    /* Defines the main heading size */

    margin-bottom: 1rem;
    /* Adds spacing below the heading */

}

/* Hero Description */

.hero-description {

    font-size: 1rem;
    /* Sets the paragraph font size */

    color: #CBD5E1;
    /* Uses a lighter color to create visual hierarchy */

    margin-bottom: 2rem;
    /* Adds spacing below the paragraph */

}


/* Hero Buttons */

.hero-buttons {

    display: flex;
    /* Enables Flexbox for button layout */

    flex-direction: column;
    /* Stacks buttons vertically on mobile devices */

    gap: 1rem;
    /* Adds equal spacing between the buttons */

}


/* Buttons */

.btn {

    display: inline-block;
    /* Allows padding and width adjustments */

    padding: 0.9rem 1.5rem;
    /* Creates a comfortable clickable area */

    border-radius: 8px;
    /* Applies rounded corners */

    text-align: center;
    /* Centers the button text */

    font-weight: bold;
    /* Makes the button text stand out */

    transition: 0.3s;
    /* Creates smooth hover animations */

    text-decoration: none;
    /* removes the default underline from links styled as buttons */ 

}

/* Primary Button */

.btn-primary {

    background-color: #2563EB;
    /* Sets the primary button background */

    color: #FFFFFF;
    /* Sets the primary button text color */

}

.btn-primary:hover {

    background-color: #1D4ED8;
    /* Changes the background color on hover */

}


/*
  Secondary Button */

.btn-secondary {

    border: 2px solid #FFFFFF;
    /* Creates an outlined button */

    color: #FFFFFF;
    /* Sets the text color */

}

.btn-secondary:hover {

    background-color: #FFFFFF;
    /* Fills the button background on hover */

    color: #0F172A;
    /* Changes the text color for better contrast */

}


/* Keyboard Focus */

.btn:focus {

    outline: 2px solid #38BDF8;
    /* Displays a visible outline for keyboard users */

    outline-offset: 3px;
    /* Creates space between the outline and the button */

}

/* Tablet Layout (768px and up) */

@media (min-width: 768px) {

    .hero {

        padding: 6rem 0;
        /* Increases vertical spacing on medium screens */

    }

    .hero-title {

        font-size: 3rem;
        /* Enlarges the main heading */

    }

    .hero-description {

        max-width: 600px;
        /* Limits the text width for better readability */

        margin: 0 auto 2rem;
        /* Centers the paragraph and adds bottom spacing */

    }

    .hero-buttons {

        flex-direction: row;
        /* Displays buttons side by side */

        justify-content: center;
        /* Centers the button group */

    }

}


/*Desktop Layout (1024px and up) */

@media (min-width: 1024px) {

    .hero {

        padding: 8rem 0;
        /* Adds more vertical spacing on large screens */

    }

    .hero-title {

        font-size: 4rem;
        /* Makes the main heading more prominent */

    }

    .hero-description {

        font-size: 1.1rem;
        /* Slightly increases the paragraph size */

    }

}