* {
    margin:0px;
  }
  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
  body {
    font-family: Poppins;
    background-color: rgba(240, 248, 255, 0.733);
  }
  /*--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: 80vw;
    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;

  }

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

       /*--second section css starts--*/
#secondsection {

 display: flex;
 flex-direction: row;
 justify-content:space-between;
 gap:2vw;
height:100vh;
}
#secondsection-leftdiv {
  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;
  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;
  
}
/*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);
  border-radius: 15px;
  height:100%;
  width: 100%;
  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:5vh;
 }
#aboutsection-rightdiv>p{
 margin-top:5vh;
}
/* 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--*/

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

#my-service {
    text-align: center;
    color: black;
    margin-top:5vh;
  }
  
  #service-section {
    margin-top: -5vh;
    height:150vh;
    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 6px 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;
  }
  
  .services:hover {
   
    transform: translateY(-7px);
  }
  .services > i {
    font-size: 8vh;
  }
  
  /*--Services section css ends--*/

   /*--project section css start--*/
   #project-heading{
    text-align: center;
    margin-top:5vh;
    color: black;
   
  }
  #project-section {
   
    height:170vh;
    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;
  }
  .project{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    height:60vh;
    width: 55vh;
    border-radius: 10px;
    border-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    overflow: hidden;
  }
  
  .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;
  }
#see-more-btn {
width: 11vw;
height: 8vh;
margin-top: 2vh;
border-style: none;
border: 1px solid #a59132;
color:#a59132;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
position: relative;
left: 44vw;
}
#see-more-btn:hover {
background-color:#a59132;
color: white;
border-style:none;
transition: 1s;
}
/*--THE FOLLOWING CSS OF PROJECT SECTION WILL APPLIED ON PROJECT-SECTION WHEN  CLICKED SEEMORE BUTTON---*/

#project-section.height{
height:255vh;

}

#project-container2.showmore{
height: 72vh;
margin: 2vh 7vw 0vh 7vw;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

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

 footer {
 /* margin:0 !important;*/
 margin-top:17vh;
   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: 14px;
    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 {
          margin-top:7vh;
          width:80vw;
          height:75vh;
        }
      
#firstsection-div > h1 {
  font-size:4vh;
  font-weight: 400;
  text-align: left;
}
#firstsection-div > p {
  margin-top:2vh;
  width:70vw;
  height:30vh;
  text-align:left;
  
}
     /*--first section css ends--*/

       /*--second section css starts--*/
#secondsection {
 display: flex;
 flex-direction:column;
 justify-content:center;
 align-items: center;
 gap:2vh;
height:150vh;
}
#secondsection-leftdiv { 
  width:80vw;
  height:70vh;
  margin:-20vh 7vw 0vh 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#secondsection-leftdiv>h2 {
  margin-top: 2vh;
}
#secondsection-leftdiv>p{
  margin-top:5vh;
  text-align: center;
 }

#secondsection-rightdiv{
  display:block;
  width:80vw;
  height:30vh;
  margin:4vh 7vw 0vh 7vw;
}
#secondsection-rightdiv>img {
  height:100%;
  width: 100%;
  object-fit: cover;
  
}
       /*--second section css ends--*/

  /*--about section css starts--*/
#about-section {
    height: 140vh;
  margin-top:0vh;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}
#aboutsection-leftdiv {
  width:80vw;
  height:30vh;
  display: flex;
  flex-direction: column;
  margin:-28vh 7vw 0vh 7vw;
}
#aboutsection-rightdiv{
  display:block;
  width:80vw;
  height:30vh;
  margin:2vh 7vw 0vh 7vw;
}
#aboutsection-rightdiv>h2{
  margin-top:2vh;
  text-align: center;
 }
#aboutsection-rightdiv>p{
 margin-top:5vh;
 text-align: center;
}
/*--about section css ends--*/

  /* Services Section css  strt*/

  #service-section {
    height:360vh;
  
  }
  #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;
  }

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


   /* Services Section css ends */


     /*--project section css start--*/

#project-section {
  height:440vh;
  row-gap: 1vh;
}
#project-container{
  height:200vh;
  display: flex;
  flex-direction:column;
  justify-content: space-evenly;
  align-items: center;
}
#project-container2{   
  display:none;
}
.project {
    height:50vh;
    width: 85vw;
    margin-left:2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
  overflow: hidden;
}
.project-title {
  margin-top:10vh;
}
.project-description {
  padding-left: 2vw;
  padding-right: 2vw;
  margin-top:2vh;
  font-size: 12px;
}
.project-link {
  height: 5vh;
  width: 5vh;
  margin-top:2vh;
}
#see-more-btn {
  width:40vw;
  height:6vh;
  margin-top:1vh;
   position: relative;
  left:29vw;
}
/*--THE FOLLOWING CSS OF PROJECT SECTION WILL APPLIED ON PROJECT-SECTION WHEN  CLICKED SEEMORE BUTTON---*/

#project-section.height{
  height:640vh;
}
#project-container2.showmore{
  height:200vh;
  display: flex;
  flex-direction:column;
  justify-content: space-evenly;
}
/*--project section css ends--*/


    /* footer css start */
    footer{
      margin-top:15vh;
        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 */
      }