@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Michroma&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');/*  roboto for UL*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
/*  h1 heading*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Michroma&display=swap');
/* simple text*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Michroma&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* General Styling */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    box-sizing: border-box;
    
}

h1 {
    font-family: "Cinzel Decorative", serif;
    font-weight: 700;
    text-decoration: underline;
    font-style: normal;
}
h2{
    font-family: "Cinzel Decorative", serif;
    font-weight:500;
    /* text-decoration: underline; */
    font-style: normal;

}

p {
    font-family: "Rubik", serif;
    /*font-optical-sizing: auto;*/
    font-weight: 400;
    font-size: large;
    font-style: normal;
}



ul {

    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

footer {
    font-family: "Michroma", 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* nav bar styling*/
.nav-part2 h4 {
    list-style-type: none;
}

.nav-part2 h4 a {
    text-decoration: none;
    padding: 3px 5px;
    /* background-color:03071e; */
    color: white; /* Ensures text is visible on the background */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
    border-radius: 5px;
}
.nav-part2 h4 a:hover {
    /* background-color: #d0c8c1;  */
    color: #ff9e16; /* Adjust text color on hover for contrast */
    border-radius: 5px; /* Optional: Adds subtle rounding on hover */
}
nav {padding-top: 0;
    position: fixed;
    display: flex;
    height: 75px;
    width: 94%;
    padding-right: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    z-index: 1;
    /* border-bottom: 2px solid black; */
    background-color:rgb(0, 0, 0);
    color: #ffdd6ec6;
}

.nav-part1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7vw;
  
    padding: 0.5vw;
}

.nav-part1 h2 {
    font-size: 2vw;
    font-weight: 500;
}

.nav-part2 {
    display: flex;
    align-items: center;
    gap: 2vw;
}
.nav-part2 button{
    background:#2d6cdf;
    color: white;
    border-radius: 6px;
    padding: 3px 8px;
}

.nav-part2 h4 {
    font-size: 1vw;
}

.menu-svg {
    display: none; /* Initially hidden on desktop */
}

/* nav section ends here */



/* Hero Section */
/* Hero Section */

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height:91vh; /* Use full viewport height for better design */
    flex-direction: column;
    position: relative; /* Ensure positioning context for child elements */
    /*background-blend-mode: overlay;*/
    margin-top: auto;
    background-color: transparent;
    color: gold;
    text-shadow: 2px 2px 4px red;
    overflow: hidden; /* Prevents video overflow outside the section */
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the container */
    z-index: -1; 
    
}
.hero-content h2 {
    text-align: center;
    font-family: "Dancing Script", cursive;
  /*font-optical-sizing: auto;*/

  font-size: 50px;
  font-style: normal;
  z-index: 1; /* Brings the content above the video */
}
.hero-content h1{
    text-align: center;
    font-size: 35px;
    /* font-optical-sizing: auto; */
    z-index: 1; /* Brings the content above the video */
}


.cta-btn { 
    background-color: #ff4081;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    justify-content: center;
}

.cta-btn:hover {
    background-color: #e6006e;
}





/* heron section ends here */



/* Welcome Section */
#welcome {
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: -25px;
}

.welcome-content {
    flex: 1;
}

.hero-image {
    flex: 1;
    text-align: center;

}

.hero-image img {
    height: 50vh;
    width: 40vw;
    border-radius: 12px;
}

.founder {
    text-align: center;
    margin-top: 20px;
}

.founder img {
    width: 100px;
    border-radius: 49%;
}


footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

footer a {
    color: #ff4081;
    text-decoration: none;
}




/* Section Styles */
section {
    padding: 1px 0px;
text-align: center;
background-color: rgb(255, 223, 197);
}

/* Gallery Grid */

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;

}

.gallery-grid img {
width: 100%;
border-radius: 10px;
}

.gallery-grid-descript {
display: flex;
flex-direction: column;
}

/* Wedding Packages */
.package-list {
display: flex;
justify-content: center;
gap: 20px;
}

.package {
background-color: #e3b3f0;
border-radius: 10px;
padding-top: 30px;
padding: 10px;

/* border-radius: 10px; */
border: transparent;
/* background-color: rgb(77, 101, 117); */
/* height: 400px; */
width: 280px;
box-shadow: rgb(119, 69, 128) 0px 20px 30px -10px;

}

.package li,p{
    text-align: left;
    padding-left: 1rem;
}


/* contact us section*/

.contactus-container{
    display: flex;
   
    justify-content: space-evenly;
    align-items: center;
    }

form{
    /*border: 2px solid black;*/
     padding: 0px 46px 5px 46px ;
    /* background-color: grey; */
    background-color: whitesmoke;
}
.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    font-family: serif;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group select {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

.phonearea {
    padding-left: 30px;
}

.timing-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timing-group label {
    font-family: serif;
}
.submit-button {
    width: 100%; /* Make the button take up full width */
    padding: 10px;
    margin-top: 10px;
    background-color: #ff4081;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.submit-button:hover {
    background-color: #e63971;
}


/* Map container */
.map {
    flex: 1;
    min-width: 300px;
    max-width: 600px; /* To match the max width of the form */
    margin-top: 17px;
}

/* Map iframe styles */
.map iframe {
    width: 100%; /* Make the iframe take full width */
    height: 300px;
    border-radius: 8px;
    border: 0;
}

/* contact us section ends here */






/* WhatsApp Button */
.whatsapp-button {
display: inline-block;
width: 75%;
margin-top: 20px;
padding: 10px 20px;
background-color: #25D366;
color: white;
border-radius: 5px;
text-decoration: none;
}


/* About Section */
.features{
    align-items: center;
    width:500px ;
}
.features li{
list-style:circle;
text-align:left;
}
.
.about-container p{
    padding-left: 10px;
}
#event-head p{
    text-align: center;
    
}
 
.gallery-grid img:hover {
transform: scale(1.1);
transition: transform 0.5s ease;
}

.submit-button, .cta-btn, .whatsapp-button {
transition: background-color 0.3s ease;
}

/* Footer Styling */
footer {
background-color: #333;
color: white;
justify-content: center;
text-align: center;
padding: 10px 0;
margin-top: 20px;
display: flex;
flex-direction: row;
 justify-content: space-between;
 font-family: "Rubik", serif;
}

footer a {
color: #ff4081;
text-decoration: none;
}



/* Responsive Design for Small Screens */
@media (max-width: 600px) {
    nav {
        background-color:rgb(0, 0, 0);
        color: #ffdd6ec6;
        padding: 0 6vw;
        height: 60px;
        width: 88%;
        position: relative;
    }

    .nav-part1 {
        width: auto; /* Adjust width for better alignment */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2vw;
    }

    .nav-part1 h2 {
        font-size: 5vw;
        white-space: nowrap; /* Prevent wrapping */
    }
    

    .nav-part2 h4 {
        font-size: 4vw;
        display: none; /* Hidden by default */
    }
    .nav-part2 button{
        width: 73px;
    }
    .menu-svg {
        display: block; /* Show SVG on small screens */
        font-size: 6vw;
        margin-top: 10px;
        cursor: pointer;
    }

    .title-logo {
        height: 8vw;
    }

    /* When menu is opened */
    .nav-open {
        display: block;
        position: absolute;
        top: 60px;
        right: 0;
        width: 30vw;
        /* height: ; */
        background-color:rgb(0, 0, 0);

        opacity: 0.7;
        z-index:1000;
    }

    .nav-open h4 {
        display: block;
        text-align: left;
        padding: 10px;
    }




      /* Center the text */
      .hero h1 {
          text-align: center;
          visibility: hidden;
      }
  
      /* Center-align the hero content */
      .hero-content h2{
          text-align: center;
          visibility: hidden;
      }
      .hero{
        height: 70vh;
        width: auto;
    }
      .hero-video {
        height:60vh; /* Adjusts the video height to 80% of the viewport height */
        width:50vw; /* Automatically scales width to maintain aspect ratio */
    }
  .hero-image{
    display: none;
  }

  .hero-video {
    height:90vh; 
    
    width:100%; 
 }  
 .features{
    width: 80vw;
 }

.package-list {
    flex-direction: column;
    align-items: center;
}

.package {
    width: 90%;
    margin-bottom: 20px;
}

.gallery-grid {
    grid-template-columns: 1fr; /* Stack images on small screens */
}

/* form section */

.contactus-container{
    flex-direction: column;
}

/* form section */

}

/*media query ended here