body{
       margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        font-family: 'Bralow', sans-serif;
       
      }
.bg-custom {
    background-image: url('images/Background\ \(1\).png');
    background-size: cover;
    background-position: top;
    height: 536px;
    margin-top: 0;
    padding-top: 0;
}
@media (max-width: 768px) {
    .bg-custom {
        height: 300px; /* Adjust the height for mobile mode */
        background-size: cover;
        background-position: center;
    }
}
.h-text{
  font-size: 55px;
}
     .loratext {
        font-family: "Lora", serif;
      }
      .headerbg{
        background: rgb(51, 61, 63);
      }
      /* Custom styles for mobile menu transition */
      .transition-transform {
        transition: transform 0.3s ease-in-out;
      }
      .transform-translate {
        transform: translateY(0%);
      }
      .transform-hidden {
        transform: translateY(-100%);
      }

      .gradient-text {
        background: linear-gradient(238.78deg, #6a822e 17.96%, #57787d 97.81%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent; /* Ensures text color is not visible behind the gradient */
      }

      /* Custom styles for background image */
      .bg-footer-dots {
        background-image: url("images/footer-dots.svg.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 300px 300px; /* Set fixed size for the background image */
      }
      
      /* Hide background image on small screens */
      @media (max-width: 768px) {
        .bg-footer-dots {
          background-image: none;
        }
      }
      .Superpowers{
        color:  #6B822E;
        font-family: 'Bralow', sans-serif;
        font-weight: 500;
      }

      /* three section */
       .textbg {
        background: #858585;
      }
      .btn{
        background:#6b822e ;
      }
      .hbtn{
        background:#87a730 ;
      }
      .cardtext {
        color: #6b822e;
      }
      .mobailnav:hover{
        color:#6B822E ;

      }
      .btn:hover{
        background: #86a537;
      }
      .card-P-text {
        color: #3a3f45;
      }
      .thirdBg{
        background: #F1F1F1;
      }
      .btbg{
        background: #eeecec;
      }
      .footerbg{
        background: #1C282C;

      }
      .textsize{
        font-size: 10px;
      }
      .Headerbg{
        margin-top: -2px;
      }

      /*//////////////////////////   project section ////////////////  */
     
      .scroll-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Webkit browsers */
    }

    .scroll-container {
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer */
    }

    .card {
        position: relative;
        overflow: hidden;
    }

    .card-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(106, 130, 46, 0.8);
        
        color: white;
        padding: 10px;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    .card:hover .card-content {
        transform: translateY(0);
    }

    .card-icon {
        font-size: 2rem;
        color: white;
    }

      /*//////////////////////////   Tech and tools section ////////////////  */
      .active-tab {
        color: #6B822E; /* Tailwind green-400 */
        font-weight: bold;
      }
      .tab {
        position: relative;
        display: inline-block;
        padding: 10px 15px;
        margin: 5px 0;
        text-align: center;
        width: 100%;
      }
      .tab::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        height: 2px;
        background-color: #34d399; /* Tailwind green-400 */
        width: 0;
        transition: width 0.3s ease, left 0.3s ease;
      }
      #progress-container {
        position: relative; /* Updated to relative to place under tabs */
        width: 100%;
        height: 2px;
        background-color: #e0e0e0;
        border-radius: 3px;
        overflow: hidden;
        margin-top: 8px; /* Space between tabs and progress bar */
      }
      #progress-fill {
        position: absolute;
        top: 0;
        height: 100%;
        border-radius: 10px;
        background-color: #c6e519;
        transition: width 0.3s, left 0.3s;
      }
      @media (min-width: 768px) {
        .tab {
          width: auto;
          margin: 0 10px;
        }
      }

      .conbg{
        background: linear-gradient(90deg, #F1F1F1 0%, #F4F4F4 100%);
        

      }


      /*                                prgoress_scrollup */
      .prgoress_scrollup {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        cursor: pointer;
        z-index: 999;
      }
    
      .progress-circle {
        transform: rotate(-90deg);
      }
    
      svg path {
        fill: none;
        stroke: #a4be13; /* Adjust the stroke color */
        stroke-width: 5;
        stroke-dasharray: 0;
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 0.3s ease;
      }
    
      .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        color: #a4be13; /* Adjust the icon color */
      }


      /* ///////////////////   footer  /////////////////// */
      .icon-container a {
        border: 2px solid white; /* Default border */
        transition: border-color 0.3s ease;
      }
      .icon-container a:hover {
        border-color: #87a730; /* Hover border color */
      }
      .icon-container i {
        transition: color 0.3s ease;
      }
      .icon-container a:hover i {
        color: #87a730; /* Hover icon color */
      }

      /* Media query for tablet screens */
      @media (min-width: 768px) and (max-width: 1024px) {
        .md\\:border-r {
          border-right: none;
        }
        .md\\:pr-8 {
          padding-right: 0;
        }
      }
      /* Default border */

      /* Media query for screens smaller than 40px */
      @media (max-width: 1200px) {
        div {
          border: none;
        }
      }

      /* Media query for smaller screens */
      @media (max-width: 767px) {
        .md\\:border-r {
          border-right: none;
        }
        .md\\:pr-8 {
          padding-right: 0;
        }
      }


      /* footer */