* {
    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;
    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;
  margin-left:7vw;
  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: left;
  }
  #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--*/

/*--project section strt--*/
       #project-section {
        height:85vh;
        color: white;
        margin-top:0vh;
        }
        #project-outer-container{
        display: flex;
        flex-direction:column;
        }
        #project-container{
        height: 70vh;
        margin:6vh 7vw 0vh 7vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        
        }
        #project-container2{   
        display:none;
        }
        #advisory,#boardroom,#custom {
        height:60vh;
        width: 55vh;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        position: relative;
        overflow: hidden;
        }
        .project {
          opacity: 0; /* Start hidden */
          transform: translateY(50px); /* Slightly move out of position */
          transition: opacity 0.8s ease, transform 0.8s ease; /* Smooth transition */
        }
        
        .project.visible {
          opacity: 1; /* Fade in */
          transform: translateY(0); /* Move to its original position */
        }
        
        .project-img {
        width: 100%;
        height: 100%;
        border-radius: 10px; 
        
        }
        .project-img:hover {
        transform: scale(1.1);
        }
        .project-layer {
        background: linear-gradient(to bottom, rgba(143, 138, 138, 0.712),black);
        text-align: center;
        height: 0;
        width: 100%;
        margin-top:2vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: height 0.5s;
        }
        .project:hover .project-layer {
        height: 100%;
        }
        .project-title {
        margin-top:10vh;
        }
        .project-description {
        padding-left: 2vw;
        padding-right: 2vw;
        margin-top:2vh;
        font-size: 12px;
        }
        .project-link {
        text-decoration: none;
        color: #a59132;
        background-color: white;
        height: 5vh;
        width: 5vh;
        margin-top:2vh;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        }

        li{
          font-size:12px;
        margin-top: 2vh;
        margin-right:2vw;
        text-align: center;
     
        }
       /*--project section ends--*/


       /*--offer section strt--*/
       #offer-section {
        height:85vh;
        color: white;
        margin-top:0vh;
        }
        #offer-heading{
          color: black; 
           text-align: center;
          color: black;
         
        }
        #offer-outer-container{
        display: flex;
        flex-direction:column;
        }
        #offer-container{
        height: 70vh;
        margin:6vh 7vw 0vh 7vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        }
        #offer-container2{   
        display:none;
        }
        #offer1,#offer2,#offer3 {
        height:40vh;
        width: 55vh;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        }
        .offer-img {
        width: 100%;
        height: 100%;
        border-radius: 10px; 
        }
        .offer-img:hover {
        transform: scale(1.1);
        }
        .offer-layer {
          height:100%;
          width: 100%;
          margin-top:2vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-radius: 10px;
          position: absolute;
          left: 0;
          bottom: 0;
          transition: height 0.5s;
          }
          .offer-layer>h3 {
          position: relative;
            }
        .offer-layer1 {
        height:0;
        width: 100%;
        margin-top:2vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: height 0.5s;
        }
      
        .offer-description{
          text-align: center;
        }
        .offer:hover .offer-layer {
          height:0;
          }
     .offer:hover .offer-layer1{
        height:80%;
        }
        /*transition effect*/
        .offer {
          opacity: 0; /* Initially hidden */
          transform: translateY(50px); /* Positioned slightly below */
          transition: opacity 0.8s ease, transform 0.8s ease; /* Smooth transition */
        }
        
        .offer.visible {
          opacity: 1; /* Fade in */
          transform: translateY(0); /* Move to original position */
        }
        

       /*--offer section ends--*/

#secondsection {
  
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  gap:2vw;
 height:100vh;
 }
 #secondsection-leftdiv {
 
  border-radius: 15px;
   color:black;
   width:45vw;
   height:65vh;
   display: flex;
   flex-direction: column;
   margin-left: 7vw;
   margin-top: 13vh;
   position:relative;
   top: 10vh;
 }
 #secondsection-leftdiv>h2 {
   margin-top:2vh;
 }
 #secondsection-leftdiv>p{
   margin-top:5vh;
  }
  /*transition*/
#secondsection-leftdiv {
  color: black;
  display: block;
  width: 45vw;
  height: 65vh;
  margin-left: 7vw;
  margin-top: 13vh;
  position: relative;
  top: 10vh;
  opacity: 0; /* Initial state: hidden */
  transform: translateX(-50px); /* Start off-screen on the left */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

#secondsection-leftdiv.scroll-active {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Move to the original position */
}
 #secondsection-rightdiv{
  color:black;
   display:block;
   width:45vw;
   height:65vh;
   border-radius:15px;
   margin-right:7vw;
   margin-top:13vh;
   position:relative;
   top: 10vh;
 }
 #secondsection-rightdiv>img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  border-radius: 15px;
   height:100%;
   width: 100%;
   object-fit: cover;
   
 }
 #secondsec-btn{
  background-color: #a59132;
  width: 12vw;
  padding:2vh;
 border: 1px solid #a59132;
  color:#a59132;
  border-radius: 25px;
  cursor: pointer;
  font-size: 18px;
  margin-top: 5vh;

  
}
#secondsec-btn-link {
  text-decoration: none;
  color: black;
}

/*transition cs*/
#secondsection-rightdiv {
  color: black;
  display: block;
  width: 45vw;
  height: 65vh;
  margin-right: 7vw;
  margin-top: 13vh;
  position: relative;
  top: 10vh;
  opacity: 0; /* Initial state: hidden */
  transform: translateX(50px); /* Start off-screen on the right */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Smooth transition */
}

#secondsection-rightdiv.scroll-active {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Move to the original position */
}

#secondsection-rightdiv > img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
        /*--second section css ends--*/


       /*--about section css starts--*/
/*-#about-me {
  text-align: center;
  margin-top: 5vh;
  color:white;
  font-weight: 400;
}-*/
#about-section {
 
  height:100vh;
  display: flex;
  flex-direction: row;
 gap: 2vw;
}
#aboutsection-leftdiv {
  color:black;
  width:45vw;
  height:65vh;
  display: flex;
  flex-direction: column;
  margin-left: 7vw;
  margin-top: 13vh;
  position:relative;
  top: 10vh;
}
#aboutsection-leftdiv>img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  height:100%;
  width: 100%;
  border-radius: 15px;
  object-fit: cover;
  
}

/*transition*/
#aboutsection-leftdiv {
  color: black;
  width: 45vw;
  height: 65vh;
  display: flex;
  flex-direction: column;
  margin-left: 7vw;
  margin-top: 13vh;
  position: relative;
  top: 10vh;
  opacity: 0; /* Initial state: hidden */
  transform: translateX(-50px); /* Start off-screen on the left */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out; /* Smooth transition */
}

#aboutsection-leftdiv.scroll-active {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Move to the original position */
}

#aboutsection-leftdiv > img {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  height: 100%;
  width: 100%;
  object-fit: cover; 
}
#aboutsection-rightdiv{
  color:black;
  display:block;
  width:45vw;
  height:65vh;
  margin-right:7vw;
  margin-top:13vh;
  position:relative;
  top: 10vh;
}
#aboutsection-rightdiv>h2{
  margin-top:0vh;
 }

#aboutsection-rightdiv>p{
 margin-top:2vh;
}
#abt-btn{
  background-color: #a59132;
  width: 12vw;
  padding:2vh;
 border: 1px solid #a59132;
  color:#a59132;
  border-radius: 25px;
  cursor: pointer;
  font-size: 18px;
  margin-top: 5vh;
}
#abt-btn-link {
  text-decoration: none;

}
/* for transition css*/
#aboutsection-rightdiv {
  color: black;
  display: block;
  width: 45vw;
  height: 65vh;
  margin-right: 7vw;
  margin-top: 13vh;
  position: relative;
  top: 10vh;
  opacity: 0; /* Initial state: hidden */
  transform: translateX(50px); /* Start off-screen on the right */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

#aboutsection-rightdiv.scroll-active {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Move to the original position */
}

/*--about section css ends--*/
  
        /* footer css start */

 footer {
  margin:0 !important;
   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.6vw;
     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;
        }
        
        .nav-links a.active-link::after {
          width: 75%;
          margin-left: 1vw;
        }
        
        .nav-links a:hover::after {
          content: "";
          width: 77%;
        }
        #contact-link{
          display:block;
        }
        #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 {
          margin-top:7vh;
          width: 80vw;
          height:70vh;
        }
      
#firstsection-div > h1 {
  margin-top:5vh;
  font-size:4vh;
  font-weight: 400;
  text-align: left;
}
#firstsection-div > p {

  margin-top:8vh;
  width:70vw;
  height:30vh;
  text-align:left;
  
}
#hero-btn{
  width:40vw;
  height:6vh;
  margin-top:15vh;
  text-align: center;
}

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

/*--project section css start--*/
#project-section {
  height:210vh;
  margin-top:-6vh;
  }
  #project-container{
  height:210vh;
  margin:0vh 7vw 0vh 7vw;
  display: flex;
  flex-direction:column;
  }
  #advisory,#boardroom,#custom {
  height:45vh;
  width:35vh;
  }
  .project-title {
    margin-top:2vh;
    }
    .project-description {
     margin-top:2vh;
    }
  /*--project section css ends--*/

  /*--offer section css start--*/
#offer-section {
  height:210vh;
  margin-top:-6vh;
  }
  #offer-container{
  height:210vh;
  margin:0vh 7vw 0vh 7vw;
  display: flex;
  flex-direction:column;
  }
  #offer1,#offer2,#offer3 {
    height:45vh;
    width:35vh;
    }
  /*--offer section css ends--*/

   /*--second section css starts--*/
#secondsection {
 
  display: flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items: center;
  gap:2vh;
 height:120vh;
 }
 #secondsection-leftdiv {

   width:80vw;
   height:40vh;
   margin:0vh 7vw 0vh 7vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 #secondsection-leftdiv>h2 {
   margin-top: 2vh;
   text-align: center;
 }
 #secondsection-leftdiv>p{
   margin-top:5vh;
   text-align: center;
  }
 #secondsection-rightdiv{
   display:block;
   width:80vw;
   height:30vh;
   margin:20vh 7vw 0vh 7vw;
 }
 #secondsection-rightdiv>img {
   height:100%;
   width: 100%;
   object-fit: cover;
 }

#secondsec-btn{
  width:40vw;
  height:6vh;
  margin-top: 8vh;
  margin-left:4vw;
text-align: center;

}
/*--second section css ends--*/

  /*--about section css starts--*/
#about-section {

  height:140vh;
  display: flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items: center;
 gap: 2vw;
}
#aboutsection-leftdiv {
  width:80vw;
  height:30vh;
  display: flex;
  flex-direction: column;
  margin:0vh 7vw 0vh 7vw;
}
#aboutsection-rightdiv{

  display:block;
  width:80vw;
  height:30vh;
  margin:8vh 7vw 0vh 7vw;
}
#aboutsection-rightdiv>h2{
  margin-top:2vh;
  text-align: center;
 }
#aboutsection-rightdiv>p{
 margin-top:3vh;
 text-align: center;
}
#abt-btn{
  width:40vw;
  height:6vh;
  margin-top: 5vh;
  margin-left: 18vw;
}
/*--about section css ends--*/
    /* footer css start */
    footer{
      margin-top:20vh;
        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 */
      }