/* In your custom.css file */
  
    html,
        body {
            font-family: "Raleway", "Oswald", sans-serif;
            line-height: 1.8rem;
        }

        h1,
        .font-weight-black {
            font-weight: 900 !important;
        }

        @media (max-width: 1200px) {

            h1,
            .h1 {
                font-size: calc(1.375rem + 1.5vw);
            }
        }

         /* Topbar */
        .topbar {
            background: rgb(0, 51, 51);
            color: #fff;
            padding: 15px 0;
            font-size: 14px;
            z-index: 1045;
            position: relative;
        }
/* === Topbar 2 Styling ===*/ 
    .topbar-bg {
      background-color: rgb(0, 31, 31) !important;
    }

    .social-icons a {
      color: #ffffff;
      transition: color 0.3s ease;
    }

    .social-icons a:hover {
      color: #57d681;
    }

    .icon {
      width: 18px;
      height: 18px;
      fill: currentColor;
      vertical-align: middle;
      transition: transform 0.3s ease;
    }

    .social-icons a:hover .icon {
      transform: scale(1.2);
    }

.theme-color {
    background-color: #0D6B68 !important;
    color: #fff !important
}

.theme-color-2 {
    background-color: #005148 !important;
    color: #fff !important
}
.theme-bg-secondary {
    background: #acbdbb;
}

.light-green-bg {
    background: #02b94e;
    color:#fff;
}

.light-green-bg:hover {
    background: #1b6b3d;
    color:#fff;
}

.light-green-bg2 {
    background: #05523e;
    color:#fff;
}

.bigfont { 
    
    letter-spacing: .4px;
    line-height: 1.2;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

  /*
  The `clamp()` function takes three values:
  1. Minimum size: `2rem` (for small screens)
  2. Fluid size: `5vw` (scales with the viewport width)
  3. Maximum size: `5rem` (for large screens)
  */
  font-size: clamp(2rem, 8vw, 15rem);
  font-weight: 900; /* Makes the text bold */
}

.service-item:hover {
    background: rgb(34, 36, 41);
    color:#57d681;
}

.service-item:hover h4 {
    font-weight: 900;
}

.service-item {
    height: auto;
    background: rgb(218, 230, 230);
    transition: 0.5s;
}

.service-item img{
    width:100%;
    height: auto;
    transition: 0.5s;
    padding: 20px;
    transition: 0.5s;
}
.text-primary
/*Specificity: (0,1,0)*/
 {
    color: rgb(255, 170, 23) !important;
}

.text-service {
    color:#00ff95b9;
}

.pt-105 {
    padding-top: 105px !important;
}







/**/
 .pt-105 {
            padding-top: 105px;
        }

        .mt-60 {
            margin-top: 60px;
        }

        .pt-25 {
            padding-top: 25px;
        }

        .pb-15 {
            padding-bottom: 15px;
        }

        /* Section Title */
        .section-title .sub-title {
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .section-title .title {
            font-size: 2rem;
            font-weight: 700;
            color: #222;
        }

        .section-title .title span {
            font-weight: 400;
            color: #555;
        }

        /* Service Boxes */
        .single-service {
            background: #fff;
            padding: 40px 30px;
            border-radius: 10px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            margin-bottom: 30px;
            z-index: 1;
        }

        .single-service:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
        }

        .service-icon img {
            width: 50px;
            margin-right: 15px;
        }

        .service-title {
            font-weight: 700;
            color: #222;
            margin-bottom: 10px;
        }

        .text {
            color: #6c757d;
            font-size: 15px;
            margin: 0;
        }

        .service-border {
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
        }

        /* Button */
        .btn-primary-custom {
            background-color: #009e35;
            color: #ebebeb;
            border-radius: 0px;
            padding: 10px 30px;
            transition: all 0.3s ease;
        }

        .btn-primary-custom:hover {
            background-color: #ffd900;
            color: #030303;
        }

        /* Floating Particles Container */
        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .floating-shapes img {
            position: absolute;
            opacity: 0.15;
            pointer-events: none;
            animation: float linear infinite;
        }

        @keyframes float {
            0% {
                transform: translate(0, 0) rotate(0deg);
                opacity: 0.3;
            }

            50% {
                transform: translate(30px, -40px) rotate(180deg);
                opacity: 0.5;
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
                opacity: 0.3;
            }
        }

        /* Reveal animation */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .reveal.animate__animated {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        /*** Footer ***/
.footer {
    background: url(assets/images/footer.png) center center no-repeat;
    background-size: contain;
}




.footer a:hover {
    color: #ca8000;
    text-decoration: none;
}

.btn-square, .btn-sm-square, .btn-lg-square {
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}
.btn-lg, .btn-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.btn {
    
    transition: color 0.15s 
ease-in-out, background-color 0.15s 
ease-in-out, border-color 0.15s 
ease-in-out, box-shadow 0.15s 
ease-in-out;
}

a {
    color: #FFAA17;
    text-decoration: none;
    background-color: transparent;
}

 .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .reveal.animate__animated {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .reveal[data-animate] {
            transition-delay: var(--delay, 0s);
        }

        .pt-105 {
            padding-top: 105px;
        }

        .mt-60 {
            margin-top: 60px;
        }

        .pt-25 {
            padding-top: 25px;
        }

        .pb-15 {
            padding-bottom: 15px;
        }

        /* any extra shapes etc you had, styling them here */

        



        /*newletter*/

  .newsletter-section {
    color: #fff;
  }

  .newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 400px;
  }

  .newsletter-form input[type="email"] {
    flex: 1;
    padding: 10px 14px;
    border-radius: 0px;
    border: none;
    font-size: 15px;
    outline: none;
  }

  .subscribe-btn {
    background: var(--tab-color, #797213);
    border: none;
    color: #fff;
    padding: 10px 18px;
    border-radius: 0px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .subscribe-btn:hover,
  .subscribe-btn:focus {
    background: var(--accent, #ff4d3f);
  }

  .sr-only {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  @media (max-width: 480px) {
    .newsletter-form {
      flex-direction: column;
      max-width: 100%;
    }

    .subscribe-btn {
      width: 100%;
    }
  }