@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

body {
    font-family: 'Source Sans 3', sans-serif;
}
.row {
  margin:0;
}

.navbar-nav .nav-item .btn-cta {
    border: 2px solid #007BFF; 
    border-radius: 5px;
    padding: 5px 10px !important;
    color: #007BFF; 
    font-weight: bold;
}
.nav-link {
    font-weight: 500;
    color:#313131;
    font-size:18px;
}
.navbar-nav .nav-item .btn-cta:hover {
    background-color: #007BFF; 
    color: #fff; 
}

.source-sans-3 {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }
  
@media (max-width:500px) {
    #half-circle {
        transform: translateY(0px) !important;
        background-position: cover !important;
        width:800px !important;
    }
    #howitworks {
        transform: translateY(0px) !important;
    }
}
@media (max-width:1100px) {
        #half-circle {
        transform: translateY(-40px) !important;
        background-position: cover !important;
    }
    #howitworks {
        transform: translateY(-20px) !important;
    }
}
@media (max-width:760px) {
    #half-circle {
    transform: translateY(-20px) !important;
    background-position: cover !important;
}
#howitworks {
    transform: translateY(-10px) !important;
}
#ferrous {
    flex-direction: column-reverse;
}
}

.banner-container {
    position: relative;
    padding: 2rem;
    background-color: #2E8A2A;
    border-radius: 10px;
    margin-top: 100px;
    overflow: hidden; /* Ensures the pseudo-element does not overflow */
}
.banner-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 450px; /* Adjust height for the thickness of the line */
    background-color: #1C721B; /* Line color */
    transform: skewY(50deg); /* Adjust the angle of the line */
    transform-origin: 70%; /* Adjust the skew origin */
    z-index: 1; /* Ensures the line is behind the text and image */
}
.banner-container::before {
    content: "";
    position: absolute;
    bottom: -40%; /* Adjust to position the circle as needed */
    width: 300px; /* Diameter of the circle */
    height: 250px; /* Diameter of the circle */
    left:15%;
    background-color: #1C721B; /* Circle color */
    border-radius: 50%; /* Makes the shape a circle */
    z-index: 1; /* Ensures the circle is behind the content */
}
.banner-content {
    position: relative;
    z-index: 2; /* Ensures the content is above the line and circle */
}
.banner-img {
    max-width: 100%;
    max-height: 300px;
    height: auto;
}


.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}
.form-group label {
    position: absolute;
    top: 50%;
    left: 0;
    transition: all 0.3s ease;
    color: #ffffff;
    font-size: 16px;
    pointer-events: none;
    transform: translateY(-50%);
}
.form-control {
    border: none;
    border-bottom: 2px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
    padding: 0.5rem 0;
    font-size: 16px;
    transition: border-bottom-color 0.3s;
    border-radius: 0px !important;
}
.form-control:focus {
    outline: none;
    border-bottom-color: #ffffff;
}
.form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
    top: -5px;
    font-size: 12px;
    color: #ffffff;
}
.form-control::placeholder {
    color: transparent; /* Hide the placeholder text */
}
.form-control:focus {
    background-color: #2E8A2A;
}
.form-control:focus {
    outline:none !important;
    box-shadow: none !important;
    color:#ffffff !important;
}
input {
    color:#ffffff !important;
}

.nav-link:hover {
    color:#2E8A2A;
    transition: color .3s;
}

.contact-info {
    padding: 2rem;
    border-radius: 10px;
}
.contact-info h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 1rem;
}
.contact-info p {
    font-size: 16px;
    margin: 0.5rem 0;
}
.contact-info i {
    color: #2E8A2A;
    margin-right: 0.5rem;
}

.section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .section.in-view {
    opacity: 1;
    transform: translateY(0);
  }

.custom-btn:hover {
    background-color: #313131 !important;
    color:#ffffff !important;
}
.custom-btn {
    transition: .3s background-color;
}

.custom-btn-2:hover {
    background-color: #ffffff !important;
    color:#313131 !important;
}
.custom-btn-2 {
    transition: .3s background-color;
}

.contact-submit:hover {
    background-color: #313131 !important;
    color:white !important;
}
.contact-submit {
    transition: .3s background-color;
}