body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #2C3E50; /* Set default background color */
    font-weight: bold;
}

/* Styles for the header */
header {
    position: fixed; /* Fixed positioning to keep it at the top */
    width: 100%;
    z-index: 2; /* Ensure the header is above the content */
    padding: 20px;
    display: flex; /* Make the header a flex container */
    justify-content: space-between; /* Align items to the start and end of the header */
    align-items: center; /* Center items vertically */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    height: 45px;
}
span{
    color: #ec6729;
}
html{
    scroll-behavior: smooth;
    transition: 1s;
  }
.nav-links {
    margin-left: auto; /* Push the links to the right side of the header */
    display: flex;
    align-items: center;
    margin-right: 45px;
    padding-right: 30px;
}

.boy{
    margin-top: -30%;
    margin-left: 50%;
}

.logo{
    width: 140px;
    height: 140px;
    margin-top: 10px;
}

.icon{
    width: 50px;
    height: 50px;
    margin-left: 200px;
}


.nav-link {
    margin: 0 10px;
    text-decoration: none;
    color: #333; /* Set link color */
    transition: transform 0.3s ease, color 0.3s ease; /* Add smoother transition effect with ease timing function */
}

.nav-link:active {
    transform: scale(0.95); /* Apply a slight scale-down effect */
}

.nav-link:hover {
    color: #2C3E50; /* Change text color on hover */
    text-decoration: underline; /* Add underline on hover */
    transform: scale(1.1); /* Apply a scale-up effect on hover */
}


.content {
    padding: 20px;
    margin-top: 50px; /* Adjust to leave space for the fixed header */
}

h1 {
    color: #333; /* Set title color */
    text-align: center;
}

h2 {
    color: #ffffff; /* Set title color */
    text-align: center;
    font-size: 3rem;
    margin-top: 36px;
}

/* Hero Section */
.hero {
    background-image: url(./images/back.jpeg);
    background-size: cover;
    background-position: top center;
    position: relative;
    z-index: 1;
    padding: 90px 0;
    text-align: center;
    color: #fff;
}

.heading{
    margin-right: 550px;
}

.hero h1 {
    font-size: 4rem;
    margin-top: 50px;
}

.hero .cta {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.hero .cta:hover {
    background-color: #555;
}

/* End Hero Section */

/* Apply different styles when scrolling */
header.scroll-active {
    background-color: #ffffff; /* Change background color when scrolling */
}

.nav-link.scroll-active {
    color: #fff; /* Change link color when scrolling */
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, auto); /* Change column sizing to auto for more spacing */
    gap: 70px; /* Decrease the gap between columns */
    margin-top: 50px;
    justify-items: center; /* Align grid items horizontally to the center */
    margin-left: 100px;
    margin-right: 100px;
}

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; /* Set circle background color */
    color: #000000; /* Set circle text color */
    border-radius: 50%;
    height: 200px; /* Set height of circle */
    width: 200px; /* Set width of circle */
    text-decoration: none;
    transition: transform 0.3s ease; /* Smooth transition */
}

.circle:hover {
    transform: scale(0.9);
}

.circle:nth-child(1) {
    grid-column: 1 / span 1; /* Position the first circle in the top left */
    grid-row: 1 / span 1;
    margin-top: -90px;
    text-align: center;
}

.circle:nth-child(2) {
    grid-column: 5 / span 1; /* Position the second circle in the top right */
    grid-row: 1 / span 1;
    margin-top: -90px;
    text-align: center;
}

.circle:nth-child(3) {
    grid-column: 3 / span 1; /* Position the third circle in the bottom left */
    grid-row: 3 / span 1;
    margin-top: -100px;
    text-align: center;
}

.circle:nth-child(4) {
    grid-column: 5 / span 1; /* Position the fourth circle in the bottom right */
    grid-row: 2 / span 1;
    margin-top: -100px;
    text-align: center;
}

.circle:nth-child(5) {
    grid-column: 3 / span 1; /* Position the fifth circle in the middle */
    grid-row: 1 / span 1; /* Adjust grid row to be in the top row */
    margin-top: 0px; /* Move the fifth circle up */
    text-align: center;
}