styles.css

*{
  margin: 0;
  padding: 0;
}


.header{
  background: url(./assests/front-image.jpeg);
  /*  VW is viewport width. It works like the percentage unit. Specifying 10vw is equivalent to occupying 10% of entire visible screen width. */
  height: 100vh;
  /* background-size: auto;, the background image will be displayed in its original size. */
  /* background-size to cover, the background image will be scaled proportionally to cover the entire content box of the element.  */
  background-size: cover; 
  display: flex;
  justify-content: space-between;
}
.logo{
  padding: 20px;
}
.navbar-items{
  display: flex;
  list-style: none;
}

.navbar-items li{
  margin-right: 20px;
  margin-top: 30px;
  margin-left: 20px;
  padding: 10px;
  font-size: 25px;
  font-weight: 500;
  cursor: pointer;
  color: white;
}

.navbar-right{
  display: flex;
  justify-content: space-between;
}

.navbar-right i{
  margin-top: 40px;
  margin-right: 20px;
  margin-left: 20px;
  padding: 10px;
  cursor: pointer;
  color: white;
}
.section-one{
  margin-top: 20px;
  margin-left: 10px;
  padding: 20px;
}
.section-one-heading{
  padding-left: 20px;
}
.section-one-heading h1{
  font-weight: 200;
  font-size: xx-large;
}
.section-one-heading p{
  color: grey;
  margin-top: 10px;
}
.section-one-grid{
  display: grid;
  /* When you use 1fr, it means that each column will take an equal share of the available space. So, in this case, all four columns will be of equal width, taking up an equal portion of the container's width. */
  grid-template-columns: repeat(4,1fr);
  /* 150px: This specifies the height of each row. In this case, all three rows will have a fixed height of 150 pixels. */
  grid-template-rows: repeat(3,150px);
  gap: 10px;
  padding: 20px;
}

.section-one-grid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.section-two{
  margin-top: 20px;
  margin-left: 10px;
  padding: 20px;
}
.section-two-heading{
  padding-left: 20px;
}
.section-two-heading h1{
  font-weight: 200;
  font-size: xx-large;
}
.section-two-heading p{
  color: grey;
  margin-top: 10px;
  margin-bottom: 20px;
}

.section-two-slider {
  width: 100%;
  overflow: hidden;
}

.cards-container {
  position: relative;
  width: 480%; /* Adjust the width to fit more cards */
  animation: 30s slidy infinite;
}

.card {
  width: 16%; /* Adjust the width to fit more cards */
  height: 400px; /* Set a fixed height for the cards (adjust as needed) */
  display: inline-block;
  position: relative; /* Set the card as a relative container */
  margin: 0 5px; /* Add some margin to improve the UI */
}

.card img {
  width: 100%;
  height: 100%; /* Make the images fill the entire card height */
  object-fit: cover; /* Ensure the image covers the whole area without distortion */
  border-radius: 20px;
}

.card p {
  position: absolute;
  bottom: 10px; /* Adjust the distance from the bottom as needed */
  left: 10px; /* Adjust the distance from the left as needed */
  font-size: 2rem;
  padding: 0.6rem;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: calc(100% - 30px); /* Adjust the width to fit within the card */
  border-radius: 10px;
}

@keyframes slidy {
  0% { left: 0%; }
  16.666% { left: 0%; } /* Adjust the percentage to fit the number of cards */
  33.333% { left: -100%; }
  50% { left: -100%; }
  66.666% { left: -200%; }
  83.333% { left: -200%; }
  100% { left: -300%; }
}

.section-three{
  display: flex;
  margin-top: 20px;
  margin-left: 10px;
  padding: 20px;
  justify-content: space-around;
}

.section-three h1{
  font-weight: 200;
  font-size: xx-large;
}

.section-three h4{
  color: grey;
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: 200;
}

.section-three h2{
  font-weight: 100;
  font-size: x-large;
}
.section-three p{
  font-weight: 100;
  font-size: medium;
  padding-top: 20px;
  letter-spacing: 0.5px;
  line-height: 25px;
  color: rgb(72, 70, 70);
}

.section-three button{
  background-color: rgb(227, 90, 90);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 25px;
  margin-top: 30px;
  padding: 12px;
  cursor: pointer;
}
.section-three img{
  width: 600px;
  height: 500px;
}

.section-four{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
}

.section-four-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:rgb(227, 90, 90) ;
  border-style: solid;
  border-radius: 10px;
  padding: 50px 80px;
  border-color: rgb(227, 90, 90);
  gap: 40px;
}

.section-four-left input{
  width: 200px;
  height: 25px;
  outline: none;
  border-radius: 10px;
  border: none;
  padding: 5px;
}
.footer {
  background-color: #585858;
  color: #fff;
  padding: 10px 0;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}