* {
    margin:0px;
  }
  html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  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;
  }

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




        /*--project section css start--*/
      #project-heading{
        text-align: center;
        margin-top:5vh;
        color: black;
       
      }
      #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;
      }
      .project{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        height:60vh;
        width: 55vh;
        border-radius: 10px;
        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:170vh;
    
  }
  
  #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-top: 15vh;
  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:5vh;
    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--*/

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

#project-section {
  height:220vh;
}
#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:440vh;
}
#project-container2.showmore{
  height:200vh;
  display: flex;
  flex-direction:column;
  justify-content: space-evenly;
}
/*--project 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 */
    }