/* General body styles */
body {
    margin: 0;
    padding: 0;
    background-color: rgba(96, 113, 98, 0.319); /* Background color */
    font-family: 'Lato', sans-serif; /* Corrected font-family syntax */
    box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
}

/* Navbar styles */
#navbar { 
    margin: 0 auto;
    width: 80%;
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgb(214, 60, 60);
}

/* Logo container */
#logo-container {
    display: flex;
    align-items: center;
    gap: 2px;
}   

#logo-container img {
    width: 25px;
    height: 22px;
}


img {
    border: none; /* Removes any border */
    outline: none; /* Removes any outline */
}

/* Navbar items */
#nav-items {
    display: flex;
    width: 502px;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    font-weight: 300;
}

#nav-items li {
    cursor: pointer;
}

/* Main header styles */
#main_header {
    display: flex;
    justify-content: flex-end;
    color: rgb(20, 67, 106);
    position: relative;
}

/* Left section within main header */
#main_header .left {
    position: absolute;
    width: 40%;
    top: 100px;
    left: 10%;
    height: 100%;
    color: rgb(27, 25, 21);
}

/* Big text in the left section */
#main_header .left .big-text {
    font-size: 70px; /* Adjusted large text size */
    color: white;
    font-weight: 900;
}


#main_header .left #overview {
   display: flex;
   justify-content: flex-start;
   margin-top: 40px;
   gap: 15px;

}


#main_header .left #overview .overview-items {
                   
                     display: flex;
                     flex-direction: column;align-items: center;
}



#main_header .left #overview .overview-items  h4{
                 font-size: 20px;
                 margin: 0;
                 padding: 0;

}


.gradient-text {

    color: purple;
}

#main_header .left #overview .overview-items  p{
             margin: 0;
             padding: 0;
             font-weight: 300;
}




/* Right section within main header */
#main_header .right { 
    width: 90%;
    height: 100%;
    z-index: -10;
    mix-blend-mode: color-dodge; /* Blending effect for visuals */
    display: flex; /* Using flexbox */
    justify-content: flex-end; /* Align content to the right */
    align-items: center; /* Vertically center the content */
}

/* Image inside the right section */
#main_header .right img { 
    width: 100%; /* Full width */
    height: 105vh; /* Height to cover the viewport height */
    margin-top: 150px; /* Adjusting vertical margin to fine-tune the position */
    object-fit: cover;
    filter: brightness(-100.5); /* Ensures image fits the area without distortion */
}




.buttons {
           display: flex;



}


.btn  {

    padding: 10px 20px;
    margin: 0px 10px;
    transform: skewX(-25deg);
    cursor: pointer;
    border: 1px solid olive;
background-color: transparent;
color: white;


}


.btn1  {

    background-color: rgb(35, 172, 172);
    background: linear-gradient(45deg, #7d63f1 6%, #2c2c94 28%, #f805d0 97%);


}


.band {
   width: 100%;
margin: auto;
display: flex; 
justify-content: space-around;
align-items: center;
padding: 10px 10px;
/* margin-bottom: 100px; */
color: white;
transform: rotate(-2.8deg);
border: 1px solid #ffffff40;
font-size: 30px;
font-weight: 900;
    background: #ffffff40; /* Dark background for contrast */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);  
backdrop-filter: blur(4px);
}

.band img {
     
    width: 25px;
    height: 25px;




}