* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

/* Style for header */
header {
    background-color: white;
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif ;
}

header h1 {
    color: rgb(77, 77, 243);
    flex: 1;
    text-align: left;
    margin-right: 20px;
    font-family: Arial, Helvetica, sans-serif ;
}

nav ul {
    list-style: none;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    color: gray(146, 145, 145);
}

nav ul li {
    margin-right: 20px;
    color: gray;
}

nav ul li a {
    text-decoration: none;
    color: #4e4a4a;
}

/* Style for the main content */
main {
    padding: 20px;
}
.container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* To separate text and image */
    align-items: center; /* Vertically center the content */
    font-family: Arial, Helvetica, sans-serif ;
}

.text-section {

    flex: 6; /* Adjust the width of the text section */
    padding: 20px; /* Add padding for spacing */
}

.image-section {
    flex:  1; /* Adjust the width of the image section */
}

.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif ;
}

.text {
    flex: 3;
}

.text h1 {
    font-size: 20px;
    text-align: left; /* Align the text to the left */
}

.text p {
    font-size: 18px;
    text-align: left; /* Align the text to the left */
}

.image {
    flex: 3;
    text-align: center; /* Align the content on the right */
}
/* Add a class for the Devkit text */
        .header-title {
            color: blue;
            text-decoration: none;/* Change the color here */
        }
.image img {
    max-width: 100%;
}
/* Add left padding to the body */
body {
    padding-left: 20px; /* Adjust the value to increase or decrease the left spacing */
}
/* CSS for styling the buttons */
.button-blue {
    background-color: rgb(79, 79, 224); /* Blue background color */
    color: white; /* White text color */
    display: inline-block;
            width: 150px; /* Adjust the width as needed */
    padding: 10px;/* Padding for the button */
    text-decoration: none; /* Remove underlines for links (if needed) */
    border: none; /* Remove button border */
    cursor: pointer; /* Add cursor pointer on hover */
    border-radius: 5px; /* Add rounded corners */
    margin-right: 10px; /* Add margin to separate buttons */
}

.button-purple {
display: inline-block;
    background-color: #e4e2f5; /* Light purple background color */
    color: rgb(73, 90, 241); /* White text color */
    padding: 10px 20px; /* Padding for the button */
    text-decoration: none; /* Remove underlines for links (if needed) */
    border: none; /* Remove button border */
    cursor: pointer; /* Add cursor pointer on hover */
    border-radius: 5px; /* Add rounded corners */
}