*{
    margin: 0;
    padding: 0;
}

.navbar {
    justify-content: space-between;
    text-align: center;
    height: 15%;
    padding: 15px;;
}

    
    #main {
	min-height: 700px;
	background-position: bottom center;
	background-size: cover;
}
a {text-decoration:none;
}

/* headerstlyes */

  header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 20px;
    
}

  nav ul {
       display: flex;
       list-style: none;
       gap: 20px;
       padding: 0;
       margin: 0;
}

  nav a {
  text-decoration: none;

}
.background-image{
 display: flex;
 justify-content: center;
  align-items: center;
  text-align: center;
  height: 80vh;
  background-image: url("./sam.jpg");
  background-size: cover;
  background-position: center;
}

    .hero {
         padding: 80px 20px;
         text-align: center;
         
    }

    .hero h1{
        font-size: 48px;
        margin-bottom: 20px;
    }
    .hero p {
        font-size: 24px;
        margin-bottom: 20px;
    }

.hero-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    padding: 12px 30px;
    border: none;
    border-radius: 0;
}



     .cards {
       display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        place-items: center;
}


      .card {
        border: 0;
     padding: 20px;
        text-align: center;
        justify-content: center;
}

     .card img {
      width: 100%;
       height: 250px;

    
}
.sec3{
display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    padding: 40px;
}

.about-image{
    width: 500px;
    margin: auto;
}

img{
    width: 100%;
height: auto;
}



.about-content h2 {
font-size: 60px;
margin-bottom: 20px;
}
.about-content p {
    font-size: 24px;
    max-width: 300px;
    margin-bottom: 20px;
}

.section h2 {
    text-align: center;
}
    
        
.container{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
margin: 65px auto;
}



.pageabout1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 60px 25px;
}

.hero-image1 img{
    width: 300px;
    height: 180px;
    object-fit: cover;
}

.pageabout2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    padding: 40px
}

.hero-image2 img{
    width: 150px;
    height: 150px;
    border-radius: 50%;

}

.hero-content1{
    max-width: 400px;
}

.hero-content1 h2{
    font-size: 40px;
    margin-bottom: 20px;
}

.hero-content1 p{
    margin-bottom: 20px;
}

.hero-content2{
    max-width: 400px;
}

.hero-content2 h2{
    font-size: 40px;
    margin-bottom: 20px;
}

.hero-content2 p{
    margin-bottom: 20px;
}




.grid-section{
    padding: 65px 15px;
    text-align: center;
}

.grid-section h2{
    margin-bottom: 38px;
}

.grid1 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.grid1 img{
    width: 180px;
    height: 140px;
    object-fit: cover;
}

.grid2 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.grid2 img{
    width: 280px;
    height: 140px;
    object-fit: cover;
}

.grid3 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.grid3 img{
    width: 180px;
    height: 140px;
    object-fit: cover;
}



buttons{
    display: flex;
    justify-content: center;
    gap: 20px;
}
/* FOOTER */
footer {
  padding: 30px;
  text-align: center;
  border-top: 1px;
  font-size: 20px;
}