.heading1{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight:650;
  font-style: normal;
}
.heading3{
    font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: bolder;
  font-style:italic;
  font-variation-settings:100;
}
    .hero {
      background-image: url('../images/nav.jpg  ' ); /* Replace with your image */
      background-size: cover;
      background-position: center;
      height: 100vh;
      color: white;
      position: relative;
    }

    .hero-overlay {
      position: absolute;
      top: 50%;
      left: 30%;
      transform: translate(-50%, -50%);
    }

    .hero .tag-line {
      font-size: 3rem;
      font-weight: bold;
    }

    .hero .tag-text {
      font-size: 1.2rem;
    }

    .navbar-custom {
      background:black;
      /* opacity: 80%; */
    }

    .navbar-brand {
      font-size: 1.5rem;
      font-weight: bold;
      color: white;
    }
    .navbar-nav{
      align-items: center;
      font-family: 'Poppins', sans-serif;
      display: flex;
      gap: 40px;
      color:white;
    }
    .navbar-nav .nav-link {
      position: relative;
      margin: 0;
      padding: 0;
                   color: rgb(206, 206, 206) ;
    }
    .navbar-nav .nav-link::before {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -5px;
      left: 0;
      background-color: #79e079;
      transition: width 0.3s ease;
    }
    .navbar-nav .nav-link:hover::before
     {
      width: 100%;
    }
    .navbar-nav .nav-link:hover {
      
      transition: all 0.3s ease;
    }


    .navbar-toggler {
      border: none;
    }

    #userHead{
      margin: 7px;
      margin-inline: 27px;
    }
    #logbtn{
      background-color: transparent;
      color: white;
      border: none;
      margin: 6px;
  }

  /* Custom #btn styling for theme and sidebar appearance */

  /* Enable smooth scrolling for the whole website */
  html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
  }

  /* Optional: Slow down scroll for main content (works for anchor links and wheel events) */
  .main {
    scroll-behavior: smooth;
  }

  /* Set Developer's form checkbox color to green */

  
    
    .btn {
      display: inline-block;
      padding: 12px 24px;
      font-size: 18px;
      color: rgb(89, 89, 89);
      background-color: transparent;
      border: 2px solid rgb(89, 89, 89);
      border-radius:60px;
      cursor: pointer;
      position: relative;
    }
    
    .btn .fa-btn {
      display: none;
    }
    
    .btn:hover .fa-btn {
      display: inline-block;
      
      animation: fadeIn 0.3s ease;
      margin-inline: 5px;
      color: rgb(121, 224, 121);
    }
    .btn a{
      text-decoration: none;
      color: rgb(89, 89, 89);
    }
 
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateX(-15px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }


/* Ensure input fields in forms are transparent on black/dark backgrounds */
  .form-control,
  input[type="text"],
  textarea,
  select {
    background-color: transparent !important;
   
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 14px;
    outline: none;
    transition: border 0.3s, color 0.3s;
    color: rgb(192, 192, 192);
  }
  .form-control:focus,
  input[type="text"]:focus,
  textarea:focus,
  select:focus {
    border-color: #6b6b6b;
    
   }
  input[type="text"]::placeholder,
  textarea::placeholder,
  select::placeholder {
    color: #565656;
  }

  /* Transparent input for overall form */
  /* input,
  textarea,
  select {
    background: rgba(255,255,255,0.1);
    color: #222;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 14px;
    outline: none;
    transition: background 0.3s, border 0.3s;
  }
  input:focus,
  textarea:focus,
  select:focus {
    background: rgba(255,255,255,0.2);
    border-color: #878787;
  } */

    @media (max-width: 991px) {
      .navbar-collapse {
        overflow: hidden;
        flex-direction: column;
        align-items: center;
        background-color: #1b1b1b;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        max-height: 0;
        transition: 1s all;
        transition: 1s all;
        padding: 0 20px;
      }
      .navbar-collapse.show{
         max-height: 300px; /* enough space for menu items */
        padding: 10px 20px;
        transition: 1s all;
        text-align: center;
       
      }
      .navbar-nav{
          gap:5px;
      }
      .navbar-nav .nav-link {
        transition: 1s all;
          margin-right: 0;
          padding: 0.5rem 0;
        }
        .navbar-toggler{
          display: block;
        }

    }
    @media (max-width:900px) {
        
        .hero-overlay{
          left: 1110%;
          top: 50%;
        }
        
    .hero .tag-line {
      font-size: 2.2rem;
      font-weight: bold;
    }
    
    .hero .tag-text {
      font-size: .9rem
    }
}
@media (max-width: 1000px) {
    .hero-overlay {
      left: 35%;
      top: 50%;
    }
  }

  /* Theme Buttons */

    

    /* Side bar  */
   body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background: #fff;
      color: #000;
      transition: background 0.3s, color 0.3s;
    }

    body.dark {
      background: #121212;
      color: #f0f0f0;
    }

    .sidebar {
      display: none;
      max-width: 280px;
      padding:30px;
      border-right: 1px solid #dddddd;
      margin-top: 30px;
      position: sticky;
      top: 80px;
      height: fit-content;
    }
    
    .section {
        margin-bottom: 24px;
    }
    
    .section-title {
      font-weight: bold;
      margin-bottom: 8px;
    }

    .radio-group label {
      display: block;
      margin-bottom: 8px;
      cursor: pointer;
    }

    input[type="radio"] {
      accent-color: rgb(70, 116, 70);
    }

    .divider {
      border-top: 1px solid #ddd;
      margin: 16px 0;
    }
    
    
    
    
    /* Flex layout for sidebar and content */
    
    .flex {
      display: flex;
}
/* Responsive sidebar styles  */

@media (max-width: 991px) {

  
  .flex{
    flex-direction: column;
  }
  .main-flex {
    flex-direction: column;
  }

.sidebar{
  display: flex;
  max-width: 100%;
  min-height: 10vh;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  border: none;
}
.section{
  padding: 0;
  margin: 0;
}
.section-title{
  text-align: center;
}
/* .ap{
  position: absolute  ;
  top: 750px;
  left: 10%;
} */
.radio-group{
  display: flex; 
  margin-bottom: 0;
  gap: 15px;
}
.divider1{
  border-top: 0.1px solid white;
  width: 100%;
  display: block;
  margin-bottom: 10px;
}
}

/* Footer */

footer{
  background-color: black;
}
.foot-item{
  text-decoration: none;
  color: white;
}
.f-list {
  display: flex;
  flex-direction: column;
  line-height: 35px;
        }
        .footer-icons i {
            transition: background 0.2s, color 0.2s;
        }
        .footer-icons i:hover {
            background: #fff;
            color: #212529;
        }
        @media (max-width: 991px) {
          .footer-head{
            font-size: 30px;  
          }
          .foot-item{
            font-size: 18px;
          }
          .footer-row > div {
                margin-bottom: 2rem;
            }
        }
        @media (max-width: 767px) {
            .footer-row {
                flex-direction: column !important;
                gap: 1.5rem !important;
            }
            .footer-row > div {
                width: 100% !important;
                margin-bottom: 1.5rem !important;
            }
            .footer-icons {
                justify-content: start !important;
            }
        }

        @media(max-width:730px){
          .foot-item{
            font-size: 22px;
          }
          .footer-head{
            color: gray;
          }
        }
  /* Message Box */

.box{
  display: flex;
  flex-wrap: wrap;
}
.alert{
  font-size: 12px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  /* max-width: 20%; */
  background-color: black;
  border-top: 5px solid rgb(255, 255, 255);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  animation: side 1s ;
}
@keyframes side {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
.fade-out {
  transition: 1s all;
  opacity: 0%;
}
.fade-in{
  transition: 1s all;
  opacity: 100%;
}


/* border of Tools */

.bore-head{
  width: fit-content  ;
  margin: auto;
  box-shadow: 1px 5px 10px 5px rgba(119, 119, 119, 0.136);
  /* border-radius: 50px; */
  margin-top: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
}

.bore{
  box-shadow: 1px 5px 10px 5px rgba(119, 119, 119, 0.136);
   border-bottom-right-radius: 20px;
   padding: 30px;
}

/* first page Css */

.head-box{
  font-size: 24px;
}

.services{
  display: flex;
  gap: 50px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  padding-bottom: 60px;
}

.popup-head{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 40px;
  padding: 10px;
  border-radius: 20px;
}
.popup-btn i{
  display: none;
}
.popup-btn:hover i {
  display: block;
  color: rgb(148, 244, 148);
}
.popup-btn:hover {
  color: rgb(148, 244, 148);
  border: 1px solid rgb(148, 244, 148);
}
.popup-head p {
  margin-top: 15px;
  font-size: 20px;
}
.stack a{
  color: gray;
}
.stack:hover a{
  color: rgb(148, 244, 148);
  transition: 1s all;
}
.stack:hover .i{
  rotate: -45deg;
 font-size: 20px;
  transition: 0.5s all;
  color: rgb(148, 244, 148);
}
.tool-connection{
  text-decoration: none;
    color: rgb(121, 224, 121);
  font-weight: bold;
}

@media screen and (max-width: 2000px) and (min-width: 1000px){
  .services{
    gap: 20px;
    padding: 10px;
    padding-bottom: 40px;
  }
.stack a{
  color: #000;
}
.stack:hover .i{
  rotate: -45deg;
 font-size: 20px;
  transition: 0.5s all;
  color: #79e079;
}
.stack:hover a{
  transition: 0.5s all;
  color: #1c711c;
}
.btn:hover .fa-btn {
  display: inline-block;
  
  animation: fadeIn 0.3s ease;
  margin-inline: 5px;
  color: #79e079;
  
}
.btn:hover{
  color: #1c711c  ;
  
}
.tool-connection{
  color: #1c711c;
  text-decoration: none;
  font-weight: lighter;
  font-family:Arial, Helvetica, sans-serif;
}

}
@media (max-width:1100px){
  .services{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .popup-head{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .popup-head p{
    text-align: center;
  }
  .popup-head h1 {
    text-align: start;
  }
  .popup-head {
    align-items: flex-start;
  }
  .popup-btn{
    margin-left: auto;
  }
  .stack{
    display: flex;
    gap: 0.1rem;
  }
}
@media (max-width:1000px){
  .stack{
    display: flex;
    gap: 0.1rem;
  }
}
@media (max-width:600px){
  .stack i{
    display: none;
  }
}

/* Feature */

.features{
  display: flex;
  justify-content: center;
}
.feature-content{
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 22px;
  text-align: start;
}
.item-hover{
  display: flex;
  gap: 20px;
    transition: color 0.3s;
}
.item-hover:hover .a {
    opacity: 1;
  transform: translateX(0);}
.a{
   opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s, transform 0.3s;
  position: relative;
  left: 0;
  margin-top: 2px;
color: #342299;
}

.bonus{
  margin-top: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 80px;
  border-radius: 30px;
  box-shadow: 5px 5px 10px 5px rgba(255, 254, 254, 0.3);
}
.bonus h1{
  font-size: 50px;
}
.bonus p{
  font-size: 30px;
  color: gray;
}
.bonus-btn{
  width: fit-content;
  margin: auto;
  padding: 20px;
  font-size: 20px;
  border-radius: 50px;
  transition: 1s all;
}
.bonus-btn:hover .b-i{
  display: block;
}
.b-i{
  rotate: 315deg;
  margin-top: 3px;
 color: #342299;
  display: none;
}
.txt{
  transition: 0.5s all;
  transform: translateX(10px);
  opacity: 1;
}


@media screen and (max-width: 700px) {
  .features{
    flex-direction: column;
    gap: 30px;
  }
  .feature-content{
    margin-top: 20px;
    font-size: 20px;
    align-items: center;
  
}

  .bonus{
    padding: 40px;
  }
  .bonus h1{
    font-size: 30px;
  }
  .bonus p{
    font-size: 20px;
  }

  
}

/* Client Css */

.Clients{
  box-shadow: 1px 5px 10px 5px rgba(119, 119, 119, 0.136);
  /* border-radius: 50px; */
  padding: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
}
.Client-items{
  display: flex;
  flex-direction: column;
  justify-content:center;
}
.Client-icons i{
  color: #f5c60d;
}
.Client-icons {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.Client-img img{
  height: 300px;
  width: 500px;
}
.Client-img{
  width: fit-content;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.496);
}