/* Reset some basic elements */
h1, p, a {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #2C2F33;
}

a {
    color: #7289DA;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Navbar styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #23272A;
    color: #ffffff;
    padding: 20px;
}


/* Update navbar link styles for hover effect */
/* Navbar link styles */
.nav-links a {
    padding: 10px 20px; /* Add padding to create a larger clickable area */
    margin: 0 10px; /* Optional: Adjust spacing between nav items */
    display: inline-block; /* Allows padding to affect element size */
    border-radius: 4px; /* Optional: Adds rounded corners */
    transition: background-color 2s, color 2s; /* Smooth transition for background and text color */
    text-decoration: none; /* Remove underline from all states */
}

.nav-links a:hover {
    background-color: #7289DA; /* Blurple background on hover */
    color: #ffffff; /* White text on hover */
}



.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Hero section */
.hero {
    background-color: #2C2F33;
    color: #ffffff;
    text-align: center;
    padding-top: 90px;
    padding-bottom: 100px;
}

h1 {
    margin-bottom: 20px;
}

.bot-icon {
  width: 200px;
  height: 200px;
  padding-bottom: 30px;  /* Add padding to the bottom of the image */
}

.title-bot {
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
}

/* Footer */
footer {
    background-color: #23272A;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.long-text {
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 960px; /* Or any other width you prefer */
    padding-bottom: 50px
    padding: 0 20px; /* This adds padding inside the box, effectively reducing the max-width of the text itself */
    text-align: center
}

.cta-button {
    background-color: #23272A; /* Navbar background color */
    color: #7289DA; /* Text color */
    padding: 10px 15px; /* Button padding */
    margin: 0 5px; /* Spacing between buttons */
    border-radius: 4px; /* Rounded corners like navbar buttons */
    text-transform: uppercase; /* Uppercase text */
    font-weight: bold; /* Bold text */
    text-decoration: none; /* No underline */
    transition: background-color 2s, color 2s
}

.cta-buttons {
  padding-top: 40px;
}



.cta-button:hover {
    text-decoration: none;
    background-color: #7289DA; /* Blurple background on hover */
    color: #ffffff; /* White text on hover */
}

.nav-brand {
    display: flex;
    align-items: center;
}

.test:hover {
  text-decoration: none;
}


.logo-image {
    margin-right: 10px; /* Adjust the margin as needed */
    height: 40px; /* Adjust the height as needed */
    /* other styles if needed */
}