main{
    padding-top: 100px;
  }    
    
    
    /* yaha se hero section ke liye css hai */
    .hero-section{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      gap: 5vw;
      padding: 8vh 4vh 5vh 4vh;
      width: 100%;
      color: black;
      /* overflow: hidden; */
    }
    .hero-text{
      display: flex;
      flex-direction: column;
      gap: 3vh;
      max-width: 45vw;
    }
    .hero-text h1{
      font-size: 2.8rem;
      font-weight: 700;
      max-width: 45vw;
    }
    .hero-text p{
      max-width: 40vw;
      font-size: 1.2rem;
    }
    .hero-img img{
      height: 55vh;
      border-radius: 50%;
      box-shadow: 3px 3px 20px black;
    }   

   /* yahs se card section ke liye breakpoint hai */
    .card-section{
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 15vh;
      gap: 5vh;
      padding: 5px 40px 5px 40px;
      text-align: center;
    }
    .four-card{
      display: grid;
      grid-template-columns: repeat(4, 0.1fr);
      gap: 10px;
    }
    .card-text{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2vh;
    }
    .card{
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 3vh;
      padding: 0px 10px 0px 10px;
      height: 500px;
      width: 350px;
      border-radius: 20px;
      border: none;
    }
    .card :hover{
      background-color: none;
      background: none;
    }
    .cardone{
      background: #5585b5; 
      border-radius: 20px;
      color: white;
    }

    .cardone :hover{
      background-color: white;
      color: black;
    }
    .cardtwo{
      background: #53a8b6;
      border-radius: 20px;
      color: white;
    }
    .cardtwo :hover{
      background-color: white;
      color: black;
    }
    .cardthree{
      background: #79c2d0;
      border-radius: 20px;
      color: white;
    }
    .cardthree :hover{
      background-color: white;
      color: black;
    }
    .cardfour{
      background: #0c4b8e; 
      border-radius: 20px;
      color: white;
    }
    .cardfour :hover{
      background-color: white;
      color: black;
    }

    .cardfive{
      background:#ff6f3c; 
      border-radius: 20px;
      color: white;
    }

    .cardfive h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .cardfive :hover{
      background-color: white;
      color: black;
    }

    .cardsix{
      background:#ff9a3c; 
      border-radius: 20px;
      color: white;
    }

    .cardsix h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .cardsix :hover{
      background-color: white;
      color: black;
    }

    .cardseven{
      background:#00bbf0; 
      border-radius: 20px;
      color: white;
    }

    .cardseven h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .cardseven :hover{
      background-color: white;
      color: black;
    }

    .cardeight{
      background: #e46161;
      border-radius: 20px;
      color: white;
    }

    
    .cardeight h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .cardeight :hover{
      background-color: white;
      color: black;
    }
    
    .cardone h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .cardtwo h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .cardthree h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .cardfour h2{
      font-size: 2rem;
      font-weight: 600;
    }

    .brand_head{
      text-align: center;
      margin-bottom: 50px;
      font-size: 1.6rem;
      font-weight: 600;
    }

    .last_line{
      text-align: center;
      margin-bottom: 50px;
      font-size: 1.3rem;
      font-weight: 600;
    }
/* yaha se breakpoint hai phone ke liye hero or card section ka */

@media (max-width:600px) {

  main{
    padding-top: 0;
    margin-top: 0;
  }

  .hero-section{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 5vw;
    padding: 10vh 4vh 5vh 4vh;
    width: 100%;
    color: black;
    /* overflow: hidden; */
  }
  .hero-img img{
    height: 0;
    border-radius: 50%;
    box-shadow: 3px 3px 20px black;
  }
  .hero-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: fit-content;
    padding: 0px 5px 0px 5px;
  }
  .hero-text h1{
    font-size: 2rem;
    font-weight: 700;
    max-width: fit-content;
  }
  .hero-text p{
    max-width: fit-content;
    font-size: 1rem;
  }

  .four-card{
      display: grid;
      grid-template-columns: repeat(1, 0.1fr);
      gap: 10px;
  }
  .card-text{
    text-align: center;
    gap: 0.2vh;
  }
  .card-text h1{
    font-size: 2rem;
    max-width: fit-content;
    font-weight: 600;
  }
  .card-text p{
    font-size: 1rem;
    max-width: fit-content;
  }

  .card{
    padding: 20px;
    font-weight: 600;
    font-size: 1.1rem;
    gap: 2vh;
    height: 550px;
    width: 300px;
    gap: 2vh;
  }

  .card-section{
    margin-top: 0vh;
  }
}
/* yaha se dusra breakpoint hai phone or tab ke liye hero section ka */

@media (min-width:600px) and (max-width:950px){

  main{
    padding-top: 10px;
  }    
  .hero-section{
    padding: 15vh 2vw 0vh 2vw;
  }
  .hero-text{
    gap: 1vh;
    text-align: center;
    max-width: fit-content;
  }
  .hero-text h1{
    font-size: 2rem;
    max-width: fit-content;
  }
  .hero-text p{
    max-width: fit-content;
    font-size: 1rem;
  }
  .hero-img img{
    height: 30vh;
  }
  .four-card{
    gap: 3vh;
    display: grid;
    grid-template-columns: repeat(1, 0.1fr);
  }
  .card-text h1{
    max-width: fit-content;
    font-size: 2rem;
    font-weight: 700;
  }
  .card-text p{
    max-width: fit-content;
  }
  .card{
    padding: 20px;
    font-weight: 600;
    font-size: 1.1rem;
    gap: 2vh;
    height: 550px;
    width: 300px;
    gap: 2vh;
  }
}

/* yaha se dusra breakpoint hai phone or tab ke liye card section ka */

/* yaha se 3rd breakpoint hai */