body{
   font-family: "Darker Grotesque", sans-serif;
    overflow-x: hidden;
    background-color: #000000;
}
.banner{
    margin: 40px 0;
}
main{
    background-color: #000000;
}



.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    background-color: #1c1d20;
    z-index: 9999;
}
/* scroll-btn */
.s-btn{
    
    border: 3px solid #e2e2e2;
    padding: 6px 15px;
    border-radius: 50px;
    color: #fff;
    position: fixed;
    right: 3%;
    bottom: 7%;
    z-index: 9999;
}
.s-btn i{
  font-size: 40px;
}


#navbar ul .nav-item .nav-link.active{
   color: #fff !important; 
}
.banner .navbar-brand img{
width: 100%;
}

.banner .navbar ul li a{
   font-size: 20px;
   font-weight: 600;
   margin: 0 10px;
   transition: all 0.5s ease ;
   color: #fff;
}

.banner .navbar ul li a:hover{
    transform: translateY(-5px);
    transition: all 0.5s ease;
    color: #fff;

}

.banner .content{
  margin: 0 auto;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
}


.banner .content h1{
    font-size: 70px;
    font-weight: 600;
    background: linear-gradient(to right, #c9d6ff, #e2e2e2); 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}

.banner .content a{

    appearance: none;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 37px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    min-width: 0;
    outline: none;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
    margin: 20px 5px;
}

.banner .content a:hover{
  color: #000000;
  background-color: #fff;
  transform: translateY(-2px);
}

.banner .header{
    margin-top: 70px;
}
/* about */

.about{
    margin: 50px 0;
    display: inline-block;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 10px;
}

.about h2{
    margin: 0;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 50px;
    color: #e2e2e2;
}
.about .sectioin2 p{
    font-size: 20px;
    font-weight: 600;  
    color: #e2e2e2;
}
.about ul{
    display: flex;
    align-items: center;
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    margin: 0;
}
.about ul li{
    padding: 10px 20px;
    border-radius: 37px;
    border: 2px solid  #e2e2e2;;
    list-style: none;
    color: #e2e2e2;
    font-size: 20px;
    font-weight: 600;
}

 .image img{
  width: 100%;
  border-radius: 15px;
}
.image{
  margin: 0 40px;
}











/* project */

.project{
    margin: 50px 0;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 10px;
    
}
.project h3{
  margin: 0;
  font-size: 45px;
  font-weight: 600;
  margin-bottom: 50px;
  color: #e2e2e2;
}

.project .owl-carousel img{
    width: 100%;
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 5px;
}

 .project a{
  text-decoration: none;
 }
.projectlg{
  margin-top: 50px;
}
.projecttag ul{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  margin: 0;
  padding: 0;
}
.projecttag ul li{
  list-style: none;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
.projecttag ul span{
  display: block;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}
.projectcnt h2{
  margin-top:20px;
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  

}
.projectimg{
  position: relative;
  overflow: hidden;
  border-radius: 12px
}
.projectimg::after {
  content: "";
  display: block;
  padding-top: 50%;
}
.projectimg img{
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}









/* contact */
 .contact{
    margin: 50px 0;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 10px;
    
}
 .contact h3{
    font-size: 32px;
    font-weight: 500;
    color: #e2e2e2;
    margin-bottom: 20px;
} 
.contact p{
  color: #fff;
  font-size: 20px;
  width: 35%;
}
/* details */
 .contact .details{
    padding: 0 30px ;
} 
.contact .details ul{
    list-style: none;
}
.contact .details h5{
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #fff;
}
.contact .details p{
    font-size: 20px;
    padding-left: 40px;
    width: 75%;
    color: #fff;
}
.contact .details h4{
  font-size: 30px;
  margin-bottom: 20px;
  color: #fff;
}
.contact .details h5 span{
    padding-right: 15px;
}
.contact h5 span{
    color: #fff;
}


.contact .message input{
    padding: 14px;
    border: none;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 20px;
    width: 100%;
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    transition: all 0.3s;
    border-radius: 0;
    -webkit-appearance: none;
}
.contact .message input:focus-visible {
    outline: none;
    
}
.contact .message textarea{
  height: 160px;
  padding: 14px;
  border: none;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 12px;
  width: 100%;
  display: block;
  background-color: transparent;
  color: #fff;
  font-size: 20px;
  resize: none;
  transition: all 0.3s;
  border-radius: 0;
  -webkit-appearance: none;
}
.contact .message textarea:focus-visible{
    outline: none;
}

.contact .button-28 {
  margin-top: 20px;
    appearance: none;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 37px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    min-width: 0;
    outline: none;
    padding: 10px 15px;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    will-change: transform;
  }
  
    .contact .button-28:disabled {
    pointer-events: none;
  }
  
    .contact .button-28:hover {
    color: #000000;
    background-color: #fff;
    transform: translateY(-2px);
  }
  
    .contact .button-28:active {
    box-shadow: none;
    transform: translateY(0);
  } 
  .social-icons{
    margin-top: 30px;
  }
  .social-icons ul{
    padding: 0;
    margin: 0;

  }
  .social-icons ul li{
    display: inline-block;
  }
  .social-icons a i{
    width: 35px;
    height: 35px;
    border-radius: 37px;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    line-height: 35px;
    margin-right: 0.5rem;
    transition: 0.3s;
  }
  
  .social-icons a:hover {
    transform: scale(1.05);
  }



/* food-app */

.food-app{
    margin: 40px 0;
}
.food-app h1{
    color: #e2e2e2;
    font-size: 36px;
    font-weight: 600;
    padding-bottom: 20px;
    
}
.food-app .mobile{
    border: 1px solid #000000;
    margin: 10px 0;
}

/* hotel app */
.hotel-app{
    margin: 40px 0;
}
.hotel-app h1{
    font-size: 36px;
    font-weight: 600;
    padding-bottom: 20px;
    color:  #e2e2e2;
}
.hotel-app .mobile2{
    border: 1px solid #000000;
    margin: 10px 0;
}
.Ahimg{
  border-radius: 15px;
}














.f1content{
  margin: 80px 0;
}
.f1content h1{
  font-size: 70px;
  font-weight: 600;
  background: linear-gradient(to right, #c9d6ff, #e2e2e2); 
  -webkit-text-fill-color: transparent; 
  -webkit-background-clip: text;
  width: 70%;
  margin: 0 auto;
  justify-content: center;
  display: flex;
  margin-bottom: 30px;
}
.f1content a{
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
margin: 0 auto;
display: flex;
font-size: 20px;
font-weight: 600;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
-webkit-user-select: none;
touch-action: manipulation;
height: 130px;
width: 130px;

}
.f1content a:hover{
  color: #000000;
  background-color: #fff;
  transform: translateY(-2px); 
}


footer p{
  color: #fff;
  font-size: 20px;
  margin-bottom: 30px;
}

footer .logo img{
  margin-bottom: 30px;
}