/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Custom Font */
@font-face {
    font-family: 'Ferrari Sans';
    src: url('../fonts/Ferrari-SansRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Body and Layout */
body {
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

header .logo img {
    height: 50px;
}

/* Remaining styles unchanged */
.hero {
    background-image: url('path/to/hero-image.jpg');
    background-size: cover;
    background-position: center;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 100px 20px;
}

.hero h1 {
    font-family: 'Ferrari Sans', Arial, sans-serif;
    font-size: 2.5em;
    margin-bottom: 10px;
}

main {
    display: flex;
    padding: 20px;
}

/* Sidebar */
.sidebar {
    width: 25%;
    padding: 20px;
    background-color: #00000079;
    border-radius: 8px;
    margin-right: 20px;
}

.sidebar h2 {
    font-family: 'Ferrari Sans', Arial, sans-serif;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.877);
}

.sidebar ul {
    list-style-type: none;
}

.sidebar ul li a {
    text-decoration: none;
    color: #fffdfd91;
}

.sidebar ul li a:hover {
    text-decoration: underline;
}

.content {
    flex: 1;
    padding: 20px;
    background-color: #00000079;
    border-radius: 8px;
}

.content h2 {
    font-family: 'Ferrari Sans', Arial, sans-serif;
    color: rgba(255, 255, 255, 0.877);
    margin-bottom: 10px;
}

.content p {
  color: #fffdfd91;
}

footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    margin-top: 190px;
}

footer p {
    font-family: 'Ferrari Sans', Arial, sans-serif;
    font-size: 0.9em;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

* {
  box-sizing: border-box;
}

.btn {
  display: inline-flex; /* Aligns items in a row and shrinks to fit the content */
  align-items: center; /* Vertically centers the text inside */
  justify-content: center; /* Horizontally centers the text inside */
  color: white;
  background: #11171a00; /* Example background color for better visibility */
  text-decoration: none;
  margin-right: 20px; /* Adjusted margin to reduce space between buttons */
  padding: 10px 10px; /* Adjusted padding for better text fitting */
  position: relative;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  border: none; /* Remove borders if unnecessary */
  border-radius: 5px; /* Optional: adds rounded corners */
  white-space: nowrap; /* Prevents the button text from breaking into a new row */
}

.navbar-container a {
    font-family: 'Ferrari Sans', Arial, sans-serif;
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
}

.navbar-container {
  display: flex;
  flex-direction: row; /* Ensures child items align horizontally */
  flex-wrap: nowrap; /* Prevents wrapping of child elements */
  padding-bottom: 5px; /* Adjust the value as needed */
}

.btn:hover .button-stroke {
  stroke-dashoffset: 0; /* Reveals the stroke on hover */
}

.button-stroke {
  display: block;
  width: calc(100% - 25px);
  height: 20px;
  stroke: #037ad6;
  position: absolute;
  left: 13.5px;
  bottom: -5px;
  stroke-width: 4;
  stroke-dasharray: 650px; /* Initially set stroke-dasharray to the total length of the path */
  stroke-dashoffset: 650px; /* Initially hide the stroke (set offset to the length of the path) */
  transition: stroke-dashoffset 3s ease-out; /* Smooth transition for stroke animation */
}

/* Keyframe animation for stroke reveal */
@keyframes reveal {
  from {
    stroke-dashoffset: 650px; /* Starting position (hidden) */
  }
  to {
    stroke-dashoffset: 0; /* Ending position (fully visible) */
  }
}

.button-stroke.reveal-animation {
  animation: reveal 2s ease-out forwards; /* Apply animation with smooth effect */
}