style.css

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 10px;
}

body{
  background-color: #FCD272;
   font-family: "Playfair Display", serif;
}

img{
  max-width: 100%;
}

.container{
  max-width: 1170px;
  margin: 0 auto;
}
.logo img{
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 400;
  font-family: "Playfair Display", serif;
}
header{
   background-image: url('../img/hero-img.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  height: 600px;
  width: 100%;
}
.btn{
  color: rgb(255, 255, 255);
  padding: 15px 30px;
  border-radius: 10px;
  background: rgb(250,46,125);
  border: none;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 500;
    font-family: "Playfair Display", serif;
}
nav{
  display: flex;
}
nav ul{
  display: flex;
  list-style: none;
  gap: 20px;
}
ul li a{
  font-size: 1.5rem;
  color:  rgb(38, 38, 38);
  font-weight: 600;
  line-height: 7rem;
}
ul li a:hover{
  color: rgb(250,46,125);
}
a{
  text-decoration: none;
}


/* Hero Section */
.hero{
    display: flex;
  justify-content: space-between;
  align-items: center;
 text-align: center;
 height: 650px;
}

.header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
gap: 30px;
padding: 0 30px;
}
.hero-container h4{
  font-size: 20px;
  color: rgb(38, 38, 38);
 font-size: 1.5rem;
 line-height: 2.4rem;
 text-align: left;
}
.hero-container h1{
  /* margin-top: 25px; */
  font-weight: 700;
  font-family: "Playfair Display", serif;
  font-size: 9.5rem;
 margin-right: 42.2rem;
line-height: 13.3rem;
margin-top: 1rem;
}
.hero-container p{
 text-align: left;
 line-height: 2.4rem;
 font-size: 1.5rem;
}
.btn-1{
text-align: left;
display: block;
color: rgb(255, 255, 255);
  padding: 15px 30px;
  border-radius: 10px;
  background: rgb(250,46,125);
  border: none;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 500;
    font-family: "Playfair Display", serif;
    margin-top: 1rem;
}


/* Even Area */
.event-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.event-info h2{
  font-size: 5rem;
  line-height: 6.5rem;
  color: rgb(250,46,125);
  font-weight: 700;
  font-family: "Playfair Display", serif;
}
.event-info p{
  font-family: "Playfair Display", serif;
  color: rgb(75, 79, 85);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.4rem;
}
.btn-2{
  color: rgb(255, 255, 255);
  padding: 15px 30px;
  border-radius: 10px;
  background: rgb(250,46,125);
  border: none;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 500;
    font-family: "Playfair Display", serif;
}


.img-part-1 img{
  border-radius: 10px;
}
.img-parent{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  text-align: center;
}
.img-part{
  position: relative;
  display: inline-block;
  margin: 10px;
  overflow: hidden;
}
.img-part img{
  display: block;
  margin: 0 auto;
  height: auto;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: palevioletred;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.img-part:hover .overlay{
opacity: 0.2;
}
.text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: rgb(255, 255, 255);
  font-size: 5rem;
  line-height: 6.5rem;
}


/* Offer Area */

.offer-area{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 650px;
  text-align: center;
  background-image: url('img/img-6.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.offer-section{
   display: flex;
   flex-direction: column;
  align-items: center;
}
.offer-section h3{
  color: rgb(255, 255, 255);
  font-size: 5.5rem;
  line-height: 6.5rem;
  font-weight: 700;
     font-family: "Playfair Display", serif;
}
.exclusive-offer-section{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding: 0 30px;
 
}
.exclusive-offer{
 border: 1px solid rgb(255, 255, 255);
  padding: 50px 10px;
}
.part-1{
  border-radius: 10px 0 0 0;
}
.part-3{
  border-radius: 0 10px 0 0;
}
.part-4{
  border-radius:  0 0 0 10px;
}
.part-6{
   border-radius: 0 0 10px 0; 
}
.exclusive-offer h4{
  font-size: 2rem;
  font-weight: 700;
   font-family: "Playfair Display", serif;
   line-height: 2.4rem;
   color: rgb(255, 255, 255);
}
.exclusive-offer p{
  font-size: 1.5rem;
  font-weight: 400;
   font-family: "Playfair Display", serif;
   line-height: 2.4rem;
   color: rgb(255, 255, 255);
}

/* team-area  */
.team-area h4{
  text-align: center;
  font-size: 5rem;
  line-height: 6.5rem;
  color: rgb(250,46,125);
  font-weight: 700;
  font-family: "Playfair Display", serif;
  margin-bottom: 3rem;
}
.team-members{
  display: grid;
  grid-template-columns: repeat(3,1fr);
 
}
.members{
text-align: center;
}
.member-img img{
  border-radius: 1rem;
}
.members h5{
  font-weight: 700;
  font-family: "Playfair Display", serif;
   font-size: 2rem;
  line-height: 2.4rem;
  color: rgb(38, 38, 38);
}
.members span{
  color: rgb(75, 79, 85);
    font-weight: 400;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  line-height: 2.4rem;
}
i{
  font-weight: 400;
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: rgb(219,3,86);
  padding: 1rem;
}



.video-area{
  position: relative;
  background-image: url("img/video.jpg");
  width: 100%;
  height: 450px;
  background-size: cover;
  background-position: center;
  margin:0 auto;

}

 svg{
   content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50px;
  height: 50px;
  background-size: cover;
  font-size: 80px;
 }

  /* Testimonial Section */

  .testimonial-area{
    text-align: center;
  }
.testimonial-about h4{
font-size: 5rem;
line-height: 6.5rem;
font-weight: 700;
font-family: "Playfair Display", serif;
color: rgb(250,46,125);
 }

  .testimonial-review{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    background: #FDEDBF;
    gap: 2rem;
   padding: 40px 20px;
  }
  .review h4{
   font-size: 2rem;
line-height: 2.4rem;
font-weight: 700;
font-family: "Playfair Display", serif; 
color: rgb(38, 38, 38);
}
 .review h5{
  font-size: 1.5rem;
line-height: 1.5rem;
font-weight: 400;
font-family: "Playfair Display", serif; 
color: rgb(75, 79, 88);
 }
 .review p{
    font-size: 1.5rem;
line-height: 2.4rem;
font-weight: 400;
font-family: "Playfair Display", serif; 
color: rgb(75, 79, 88);
}
span i{
  font-size: 1.5rem;
  color: rgb(250,46,125);
}
/* Gallary Area */
.gallary-content h4{
 font-size: 5rem;
line-height: 6.5rem;
font-weight: 700;
font-family: "Playfair Display", serif; 
color: rgb(250,46,125);
text-align: center;
padding-bottom: 10px;
}

.gallary-img{
  display: flex;
  gap: 10px;
  
}
.gallary-part img{
   border-radius: 10px;
}
.gallary-folder img{
  width: 80%;
  border-radius: 10px;
  margin-bottom: 10px;
}
.gallary-part-2 img{
  width: 90%;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* Contact  Area  */
.contact-about{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
.contact-info {
	text-align: center;
	margin: auto;
  background: rgb(219,3,86);
  padding: 90px 40px;
  border-radius: 0 10px 10px 0px;
}
.contact-info h4{
  font-size: 5rem;
line-height: 6.5rem;
font-weight: 700;
font-family: "Playfair Display", serif; 
color: rgb(255, 255, 255);
}
.contact-info p{
  font-size: 1.5rem;
  font-weight: 400;
   font-family: "Playfair Display", serif;
   line-height: 2.4rem;
   color: rgb(255, 255, 255);
}
.btn-3{
  color: rgb(250,46,125);
  padding: 10px 40px;
  border-radius: 10px;
  margin-top: 30px;
  text-align: left;
  display: block;
}

.footer-about{
  text-align: center;
}
.footer-about p{
   font-size: 1.5rem;
  font-weight: 400;
   font-family: "Playfair Display", serif;
   line-height: 2.4rem;
   color: rgb(75, 79, 88);
}
.address{
 margin-top: 10px;
 font-size: 1.5rem;
  font-weight: 400;
   font-family: "Playfair Display", serif;
   line-height: 2.4rem;
   color: rgb(75, 79, 88);
}
.address span{
font-weight: bold;
}
hr{
  width: 100%;
  color: rgb(75, 79, 88);
  opacity: 0.1;
}
.icons i{
color: rgb(250,46,125);
margin-top: 20px;
}
.copyright-area{
   font-size: 1.5rem;
  font-weight: 400;
   font-family: "Playfair Display", serif;
   line-height: 2.4rem;
   color: rgb(75, 79, 88);
   height: 100px;
}

/* Responsive css */
@media (max-width:1147px) {
  
  .hero-container h1{
    font-size: 3.5rem;
   margin: 0 auto;
  }
  .hero-container h4{
    text-align: center;
  }

}

@media (max-width:500px) {

  html{
    font-size: 0.5rem;
  }
 .logo img{
  margin-top: 30px;
 }

  .header-container{
    flex-direction: column;
    gap: 2rem;
    text-align: center;
    
  
  }
  .btn{
    display: none;
  }
  nav ul li a{
    font-size: 2rem;
  }
 .hero{
  height: 320px;
 }
 .hero-container p{
  font-size: 1.8rem;
  text-align: center;
 }
.btn-1{
  text-align: center;
 display: inline-block;
 margin-top: 30px;
}

.event-container{
  flex-direction: column;
  gap: 30px;
  text-align: center;
}
  .event-info h2{
  font-size: 3.5rem;
  }
  .text{
    font-size: 2rem;
  }
  .img-parent{
    grid-template-columns: 1fr;
    width: 95%;
    margin: auto;
  }
  .img-part img{
    width:100% ;
  }
  .offer-section h3{
     font-size: 3.5rem;
  }
  .exclusive-offer-section {
	grid-template-columns: 1fr;
	padding: 0 25px;
}
  
.exclusive-offer h4{
  font-size: 2.4rem;
  padding-bottom: 5px;
}
.exclusive-offer p{
  font-size: 2rem;
}
.exclusive-offer {
	border: 1px solid rgb(255, 255, 255);
	padding: 10px;
	border-top: 1px #fff;
	border-left: none;
	border-right: none;
}
.part-6{
  border: none;
}
.team-area h4{
  font-size:3.5rem ;
}
  .team-members{
    grid-template-columns: 1fr;
  }
  .member-img img{
    width: 95%;
  }
  .testimonial-about h4{
    font-size: 3.5rem;
  }
  .testimonial-review{
    grid-template-columns: 1fr;
  }
  .gallary-content h4{
    font-size: 3.5rem;
  }
  .gallary-img{
    flex-direction: column;
  }
  .gallary-part-2 img{
    width: 100%;
  }
  .contact-about{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .contact-img img{
    width: 100%;
  }
  .contact-info {
    width: 100%;
    padding: 10px 0;
  }
  .contact-info h4{
font-size: 3.2rem;
  }
  .btn-3{
    margin: 0 auto;
    margin-top: 10px;
  }
}

@media (max-width:500px) {
  .container{
 overflow: hidden;
 padding: 0 5px;
}
header{
  height: 420px;
  background-image: url("img/hero-img.jpg");
     background-position: 45%; 
    background-position: cover;
}
.logo img{
  margin-top: 5px;
  font-size: 0.3rem;
}
 .hero-container h1{
  font-size: 2rem;
  margin-top: -10px;
 }
 .hero-container h4{
  margin-bottom: -40px;
 }
 .hero-container p{
  margin-bottom: 5px;
  padding: 0 30px;
  
 }
 .video{
  width: 100%;
  padding: 0;
  margin: 0;
 }
 
 .footer-about img{
  font-size: 1.5rem;
  margin-top: 20px;
 }
 
}
@media (max-width:390px) {
nav ul li a{
  font-size: 1.5rem;
}
.btn-1{
  margin-bottom: 15px;
}
.exclusive-offer {
	border-bottom: 1px solid rgb(255, 255, 255);
}
 .part-6{
  
 border-bottom: none;
 }
 .exclusive-offer-section p{
display: inline-block;
padding: 0 ;
}

.video{
	width: 100%;
}

}