* {
  margin: 0px;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family: Poppins;
}
/*--Navbar css starts--*/
#navbar {
  background-color: rgba(0, 0, 0, 0.212);
  opacity: 90%;
  height: 12vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
}
/*#namelogo {
  margin: 4vw 0vw 0vw -5vw;
}*/
#namelogo{
  height:8vh;
  margin:4vw 0vw 7vh 7vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#namelogo>img{
  width:20vh;
}
.nav-links {
  margin: 0vh 2vw 0vh 3vw;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  padding: 1vw;
  position: relative;
  font-size: 18px;
}
.nav-links a::after {
  content: "";
  width: 0;
  height: 0.3vh;
  margin-left: 1vw;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #a59132;
  transition: width 0.3s ease;
}
.nav-links a:hover::after {
  content: "";
  width: 75%;
  margin-left: 1vw;
  height: 0.3vh;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #a59132;
  transition: width 0.3s ease;
}
.nav-links a.active-link::after {
  width: 72%;
  margin-left: 1vw;
}
#contact-link{
  display: none;
}
button > a {
  text-decoration: none;
  color: #fff;
}
#contact-btn {
  background-color: transparent;
  width: 10vw;
  height: 8vh;
  border: 1px solid #a59132;
  color: #fff;
  border-radius: 25px;
  cursor: pointer;
  margin-right: 7vw;
  font-size: 18px;
}
#contact-btn:hover {
  background-color: #a59132;
  color: white;
  border-style: none;
  transition: 1s;
}
#contact-btn-link {
  text-decoration: none;
  color: black;
}
#menu-icon {
  display: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}
#cross-icon {
  display: none;
  color: white;
  font-size: 0.85rem;
  cursor: pointer;
}
/*--Navbar css ends--*/

/*--first section css start--*/
#firstsection {
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(30, 14, 4, 0.7));
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#firstsection img {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  position: absolute;
  top: 0px;
  z-index: -1;
}
/* Animation Target */
#firstsection-div {
  height: 45vh;
  width: 45vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  opacity: 0; /* Start hidden */
  transform: translateY(-50px); /* Start above the view */
  transition: opacity 2s ease, transform 0.8s ease; /* Transition effect */
}

#firstsection-div.visible {
  opacity: 1; /* Become visible */
  transform: translateY(0); /* Return to original position */
}

#firstsection-div > h1 {
  font-size: 6vh;
  font-weight: 400;
}

#firstsection-div > p {
  margin-top: 5vh;
  text-align: center;
}

#hero-btn{
  background-color: transparent;
  width: 10vw;
  padding:2vh;
 border: 1px solid #a59132;
  color:#fff;
  border-radius: 25px;
  cursor: pointer;
  font-size: 18px;
  margin-top: 5vh;
}
#hero-btn:hover {
  background-color:#a59132;
  color: white;
  border-style:none;
  transition: 1s;
}
#hero-btn-link {
  text-decoration: none;
  color: black;
}


/*--first section css ends--*/

/*--Services section css start--*/

#my-service {
  text-align: center;
  margin-top: 10vh;
  color: black;
  font-weight:600;

}
/*
#service-section {
  margin-top: -5vh;
  height: 80vh;
  display: flex;
  flex-direction:column;
  justify-content: space-evenly;
  align-items: center;
}
#service-container {
  height: 75vh;
  margin: 0vh 7vw 0vh 7vw;
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  gap:2vw;
}
.services {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  height: 55vh;
  width: 45vh;
  font-size: 14px;
  color: black;
  border-radius: 10px;
  transition: transform 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 2vw;
  padding-right: 2vw;
}
*/
#service-section {
  margin-top: -5vh;
  height: 80vh;
  display: flex;
  flex-direction:column;
  justify-content: space-evenly;
  align-items: center;
}
#service-container {
  height: 75vh;
  margin: 0vh 7vw 0vh 7vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap:5vw;
  perspective: 1000px; /* Apply perspective to the parent container */
}

/* Parent container for the flip effect */
.services {
  height:40vh;
  width: 40vh;
  border-radius: 10px;
  font-size: 14px;
  color: black;
  border-radius: 10px;
  transition: transform 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 2vw;
  padding-right: 2vw;
}

.service-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s; /* Smooth flip transition */
  transform-style: preserve-3d; /* Enable 3D transformations */
}

/* Flip effect when hovered */
.services:hover .service-inner {
  transform: rotateY(180deg);
}

/* Front and Back Faces */
.service-front,
.service-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hides the back of the element */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw;
  text-align: center;
}

/* Front Face Styling */
.service-front {
  background-color: white;
  color: black;
}

/* Back Face Styling */
.service-back {
  background-color:whitesmoke;
  color: black;
  transform: rotateY(180deg); 
}
.service-front>i {
  font-size:8vh;
}
/*--Services section css ends--*/

/*--Contact section css start--*/
#contact-outer-section {
  /*background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(30, 14, 4, 0.7)),
    url("images/background.jpg");*/
  display: flex;
  flex-direction: column;
  margin-top: 5vh;
}
#contact-outer-section > h2 {
  text-align: center;
  margin-top: 2vh;
  color: black;
}

#contact-section {
  height: 240vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: -2vh;
  gap: 3vh;
}

#contact-section-form {

  border-radius: 10px;
  height:210vh;
  width: 45vw;
  margin-right: 7vw;
  margin-top: 10vh;
  padding-left: 2vh;
  padding-right: 2vh;
}
#contact-section-leftdiv {
   color: black;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 2vh;
  border-radius: 10px;
  height: 75vh;
  width: 45vw;
  margin-top: 10vh;
  margin-left: 7vw;
}
#let-connect {
  margin-top: 7vh;
  font-size: 25px;
  color: black;
}
#contact-para {
  margin-top: 5vh;
  font-size: 14px;
}
#contact-icons-container {

  width: 18vw;
  height: 10vh;
  margin-top: 3vh;
  display: flex;
  align-items: center;
  gap: 1vw;
  
}
.email {
  margin-top: 2vh;
  color: black;
}
.email > i {
  color: black;
}
.whatsapp-link{
  text-decoration: none;
  color: black;
}
.contact-icons {
 
   
  font-size:3vh;
  height:8vh;
  width: 8vh;
  margin: 0.1;
  border-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;


}
#contact-icons-container > a {
  text-decoration: none;
  color:white;
}
#contact-icons-container > i:hover {
  color: #a59132;
  transform: translateY(-5px);
}
#visit-link-div{
  color:black;
  margin-top:5vh;
}
#visit-us-link{
  color: #a59132;
  text-decoration: none;

}
#visit-us-div>a:hover{
 color:#a59132;
 cursor: pointer;
 text-decoration: underline;

}
#form {
  color:black;
  display: flex;
  flex-direction: column;
  justify-content: left;
  margin-top: 6vh;
}
#form input {
 background-color:rgba(224, 216, 216, 0.856);
  color: black;
  padding: 2vh 0 2vh 1vh;
  margin-top: 2vh;
  border-radius: 3px;
  font-size: 14px;
 border: none;
  outline: none;
}
/*#form textarea {
  background-color:rgba(209, 201, 201, 0.808);
  color: black;
  border-radius: 3px;
  margin-top: 4vh;
  padding-left: 1vh;
  font-size: 14px;
  outline: none;
  border: none;
}*/
.label-heading{
  margin-top: 2vh;
  font-weight: bold;
}
.checkbox-group1,.checkbox-group2{
  margin-top: 2vh;  
  display: flex;
  flex-direction: column;
}
.checkbox-group3,.checkbox-group4{
  margin-top: 2vh;  
  display: flex;
  flex-direction:row;
  gap: 1vw;
}
#submit-btn {
  width:44vw;
  height: 8vh;
  margin-top: 4vh;
  border-style: none;
  border: 1px solid #a59132;
  color: #a59132;
  border-radius:5px;
  cursor: pointer;
  font-size: 16px;
}
#submit-btn:hover {
  background-color: #a59132;
  color: white;
}
/*--Contact section css ends--*/
/* footer css start */

footer {
  background-color: #111;
  color: #fff;
  height: 65vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2vh;
}
footer > #firstdiv {
 
  border-bottom: 1px solid #a59132;
  height: 15vh;
  width: 77vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#footer-email {
  padding: 2vh 0vh 2vh 1vh;
  border-radius: 5px;
  border-style: none;
}
#subscribe-btn {
  padding: 2vh 3vh 2vh 3vh;
  background-color: #a59132;
  border-radius: 5px;
  border-style: none;
  cursor: pointer;
}
footer > #seconddiv {
  height: 45vh;
  width: 77vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2vh;
}
#seconddiv-firstchild {
  width: 35vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
#footer-icons-container{
 
  height: 11vh;
  width: 20vw;
 
}
.social-iconlink > i {
  font-size: 3vh;
  padding: 2vh;
  margin: 0.1;
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  transition: transform 0.5s;
}
.social-iconlink > i:hover {
  color: #a59132;
  transform: translateY(-5px);
}
#seconddiv-secondchild {
 
  width: 10vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.footer-links {
  text-decoration: none;
  color: white;
}
.footer-links:hover {
  color: #a59132;
}
#seconddiv-thirdchild {
   
  width: 28vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
footer > #thirddiv {
  background-color: #a59132;
  height: 5vh;
  width: 100vw;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* footer css ends */
/* Styles for the Scroll-to-Top Button  start*/
#scrollToTopBtn {
  height: 8vh;
  width: 8vh;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #a59132;
  color: white;
  border: none;
  border-radius: 50%;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  display: none; /* Initially hidden */
  transition: opacity 0.3s ease;
}

#scrollToTopBtn:hover {
  background-color: black;
}

/* Styles for the Scroll-to-Top Button  ends*/

/* Styles for the Scroll-to-Bottom Button start */
#scrollToBottomBtn {
  height: 8vh;
  width: 8vh;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #a59132;
  color: white;
  border: none;
  border-radius: 50%;
  text-align: center;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
}

#scrollToBottomBtn:hover {
  background-color: black;
}
/* Styles for the Scroll-to-Bottom Button ends */

    
@media (max-width: 600px) {
  /*--body css start--*/
  body{
       overflow-x: hidden;
  }
  /*--body css ends--*/
/*-- Navbar section starts --*/
#navbar {
  background-color:rgba(0, 0, 0, 0.212);
  height: 10vh;
  z-index:1000;
}

#namelogo{
  width:1vh;
}
#namelogo>img{
  width:30vw;
  margin:10vh 0vw 5vh 20vw;

}
.nav-links {
  display: none;
  flex-direction: column; 
  align-items: center;
  position: absolute;
  top: 1vh;
  left: 0;
  background-color: black;
  opacity: 100%;
  width: 100%;
  height: 100vh;
  font-size:16px;
}
.nav-links a {
padding: 1vw;
position: relative;
margin-top:10vh;
}

.nav-links.show {
  display: flex;
}
#contact-link{
  display:block;
}
.nav-links a.active-link::after {
  width: 75%;
  margin-left: 1vw;
}

.nav-links a:hover::after {
  content: "";
  width: 77%;
}
#menu-icon, #cross-icon {
  display: block; 
  margin-right:5vw;
  
}
#cross-icon {
position:relative;
top:5vh;
 font-size:20px
  
}
   #contact-btn{
  display:none;
}
/*-- Navbar section ends --*/

/*--first section css start--*/
#firstsection-div > h1 {
  font-size: 6vh;
  font-weight: 400;
  text-align: center;
}
#firstsection-div > p {
  margin-top: 5vh;
  width:70vw;
  height:30vh;
  text-align: center;
}
#hero-btn{
  width:40vw;
  height:6vh;
  margin-top:15vh;
}

/*--first section css ends--*/

  /* Services Section css  strt */

  #service-section {
    height:180vh;
  
  }
  #my-service {
   margin-top:5vh;
  }

  #service-container {
    margin-top:6vh;
    flex-direction: column;
    align-items: center;
    height:150vh;
  }

  .services {
    height: 65vh;
    width: 65vw;
    margin:5vh 0vw 4vh 0vw;
    font-size: 14px;
    padding:3vh 3vw 3vh 3vw;
  }

  .service-front > i {
    font-size:3vh;
    margin-bottom: 1vh;
  }


   /* Services Section css ends */


     /* Contact Section */
   
  #contact-section {
    height:335vh;
    margin-top:15vh;
    margin-bottom: 0vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #contact-section-form {
  
    height:60vh;
    width: 90vw;
    margin:10vh 9vw 0vh 9vw;
    padding-left: 2vh;
    padding-right: 2vh;
  }
  #form input {
    
     padding: 1.5vh 0 1.5vh 1vh;
     
   }
  #contact-section-leftdiv {
    height:65vh;
    width:90vw;
    margin:-105vh 7vw 0vh 7vw;
  }
  #contact-icons-container {
    display: flex;
    flex-direction: row;
    justify-content:start;
    align-items: center;
    width:40vw;
    height: 8vh;
    margin-top:4vh;
    
  }
  #contact-icons-container > i {
    font-size:3vh;
    margin-top:-4vh;
  }
  #submit-btn{
    width:40vw;
    height:6vh;
    margin-top: 5vh;
   
  }
    

/* footer css start */
footer{
    margin-bottom: 0vh;
    height:120vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
    gap:2vh;
   color:white;
   background-color: black;
    }
    footer>#firstdiv{
    height:20vh;
    width:77vw;
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    }
    #firstdiv-firstchild{
      margin-top: 5vh;
    }
    #footer-email{
    padding:1vh 0vh 1vh 1vh;  
    }
    #subscribe-btn{
    padding:1vh 1vh 1vh 1vh;
    }
    footer>#seconddiv{
    margin-top:-55vh;
    height:20vh;
    width:77vw;
    display: flex;
    flex-direction:column;
    align-items: center;
    }
    #seconddiv-firstchild{
    text-align: center;
    width:77vw;
    display: flex;
    flex-direction: column;
    gap: 2vh;
    }
    #footer-icons-container{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 11vh;
      width:77vw;
    }
    .social-iconlink > i {
      font-size:1.5vh;
      padding:2vh;
      margin:2vw;
    }
    #seconddiv-secondchild{
      margin-top:2vh;
      margin-bottom:-15vh;
      width:50vw;
      display: flex;
      flex-direction:column;
      align-items: center;
      gap:0vh;
    }
    #seconddiv-thirdchild{
      font-size: 12px;
      margin-top:15vh;
      margin-bottom:10vh;
      width:70vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap:1vh;
    }
    #address{
      text-align: center;
    }
   
    /* footer css ends */
  }