.carousel-item{
    height: 650px;
}

/*  I Stock Web Font  */
.istok-web-regular {
    font-family: "Istok Web", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .istok-web-bold {
    font-family: "Istok Web", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .istok-web-regular-italic {
    font-family: "Istok Web", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .istok-web-bold-italic {
    font-family: "Istok Web", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  /* abel Font */
  .abel-regular {
    font-family: "Abel", serif;
    font-weight: 400;
    font-style: normal;
  }
    
/* Nav Bar Style */
.navbar {
    font-family: "Istok Web", sans-serif; /* Default font for navbar */
    background-color: #f8f9fa; /* Adjust background as needed */
    padding: 10px 20px;
}

.navbar-brand img {
    width: 200px;
    /* Use Abel font for brand name if text-based, or leave as image */
    font-family: "Abel", serif;
    padding-right: 60px;
}

.navbar-nav .nav-link {
    font-family: "Abel", serif;
    font-weight: 400;
    color: #333; /* Default color */
    transition: color 0.3s ease;
    font-size: 18px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #28a745; /* Highlight color on hover/active */
}

.navbar-toggler {
    border-color: transparent;
    outline: none;
}

.navbar-toggler-icon {
    color: #333; /* Icon color */
}

.btn-outline-success {
    font-family: "Istok Web", sans-serif;
    font-weight: 700; /* Bold font for button */
    color: #28a745;
    border-color: #28a745;
    transition: all 0.3s ease;
}

.btn-outline-success:hover {
    background-color: #28a745;
    color: #fff;
}

/* MOdal */
* Modal Styling */
.modal-content {
    padding: 20px;
    background-color: #f8f9fa;
}

.modal-title {
    font-family: "Abel", serif;
    font-weight: bold;
}

.modal-body p {
    font-family: "Abel", serif;
    font-size: 0.9rem;
    color: #6c757d;
}
.modal-submit{
    font-family: "Abel", serif;
    font-weight: 700; /* Bold font for button */
    color: #28a745 !important;
    border-color: #28a745;
    transition: all 0.3s ease;
}


/* Carousel caption styling */
.carousel-caption {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 10px;
    width: 70%;
    color: #fff;
    font-family: "Abel", serif;
    font-weight: 800;
}

/* Medium screens (tablets) */
@media (max-width: 1024px) {
    .carousel-item {
        height: auto; /* Let content dictate height */
    }

    .carousel-caption h5 {
        font-size: 2rem;
    }

    .carousel-caption p {
        font-size: 1.2rem;
    }

    .carousel-caption {
        width: 80%;
    }
}

/* Small screens (mobile) */
@media (max-width: 768px) {
    .carousel-item {
        height: auto;
    }

    .carousel-caption h5 {
        font-size: 1.5rem;
    }

    .carousel-caption p {
        font-size: 1rem;
    }

    .carousel-caption {
        width: 90%;
        padding: 10px;
        bottom: -25px;
    }
}

/* Extra small screens */
@media (max-width: 290px) {
    .carousel-caption {
        transform: none; /* Prevent alignment issues */
        bottom: 10%;
        width: 90%;
    }

    .carousel-caption h5 {
        font-size: 1.rem;
    }

    .carousel-caption p {
        font-size: 0.9rem;
    }

    .carousel-item img {
        object-fit: cover;
        width: 100%;
        height: auto; /* Ensure proportional height */
    }
}

.carousel-indicators {
    bottom: 15px;
}

@media (max-width: 400px) {
    .carousel-indicators {
        bottom: 20px; /* Adjust further for clarity */
    }
}


/* Add padding to the container for all screens */
.container {
    padding-left: 30px;
    padding-right: 30px;
}

/* Fix card spacing and text alignment */
.card {
    border-radius: 10px; /* Optional: adds rounded corners */
    overflow: hidden; /* Ensures clean alignment for images and text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    margin-top: 20px; /* Reduce space between header and product boxes */
}

.card-body {
    text-align: left; /* Ensures readable alignment */
}

.card-footer {
    background-color: transparent;
    border-top: none; /* Remove footer border */
    text-align: center; /* Center align the button */
}

/* Button styling to match the green theme */
.card-footer .btn {
    background-color: #28a745; /* Green button background */
    border: none; /* Remove button border */
    color: #fff; /* White text */
    padding: 10px 20px; /* Button padding */
    border-radius: 5px; /* Rounded corners */
    font-weight: 600; /* Make text bold */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.card-footer .btn:hover {
    background-color: #218838; /* Darker green on hover */
    color: #fff; /* Ensure text stays white */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Add shadow on hover */
}

/* Section header spacing */
#products {
    margin-bottom: 20px; /* Reduce space between header and first product box */
}

/* Responsive adjustments for medium screens (tablets) */
@media (max-width: 768px) {
    .card {
        margin-bottom: 20px; /* Add spacing between cards */
    }

    .card-body h5 {
        font-size: 1.2rem; /* Adjust heading size */
    }

    .card-body p {
        font-size: 1rem; /* Adjust text size */
    }
}

/* Responsive adjustments for small screens (mobile) */
@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px; /* Reduce padding for smaller screens */
    }

    .card-body h5 {
        font-size: 1rem; /* Smaller heading size */
    }

    .card-body p {
        font-size: 0.9rem; /* Smaller text size */
    }
}

/* Ensure uniform spacing between cards and header for all screen sizes */
@media (max-width: 576px) {
    #products {
        margin-bottom: 15px; /* Reduce margin further for very small screens */
    }

    .card {
        margin-bottom: 15px; /* Ensure tight spacing on smaller screens */
    }
}

/* Adjust the Products heading */
#products {
    margin-bottom: 10px; /* Reduce the margin-bottom */
    padding-top: 0; /* Remove any padding at the top */
    padding-bottom: 10px; /* Optionally adjust padding at the bottom */
    font-size: 2rem; /* Adjust font size if needed */
    text-align: center; /* Center the heading */
}

/* Remove extra space from the container */
.container {
    padding-top: 0; /* Remove any top padding from the container */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #products {
        font-size: 1.5rem; /* Adjust font size for tablet */
        margin-bottom: 5px; /* Less space below the heading on tablet */
    }
}

@media (max-width: 576px) {
    #products {
        font-size: 1.2rem; /* Smaller font size for mobile */
        margin-bottom: 5px; /* Even less space on mobile */
    }
}

/* Add padding to the container to create space between the content and the site boundaries */
.container {
    padding-left: 20px;  /* Add padding to the left of the container */
    padding-right: 20px; /* Add padding to the right of the container */
}

/* Styling for the background boxes */
.bg-secondary, .bg-dark-subtle {
    padding: 30px !important; /* Add padding inside the background boxes for better content spacing */
    margin-bottom: 20px !important; /* Add space between the background boxes */
}

/* For mobile responsiveness */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;  /* Adjust padding on medium screens */
        padding-right: 15px; /* Adjust padding on medium screens */
    }

    .bg-secondary, .bg-dark-subtle {
        padding: 20px; /* Adjust padding inside the boxes for smaller screens */
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 10px;  /* Adjust padding on smaller screens */
        padding-right: 10px; /* Adjust padding on smaller screens */
    }

    .bg-secondary, .bg-dark-subtle {
        padding: 20px !important; /* Adjust padding inside the boxes for very small screens */
    }

    .row {
        flex-direction: column; /* Stack columns vertically on smaller screens */
    }

    .col-6 {
        width: 100%; /* Make columns take the full width on small screens */
    }
}

.fstext {

    margin-bottom: 10px !important;
    padding-top: 30px !important;
    padding-bottom: 0px !important;
}


  /* Reduce margin and padding for Contact Us header */
  #products {
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
  }

  /* Mobile Responsive Styles */
  @media (max-width: 768px) {
    /* Center "Send Message" button */
    .btn-primary {
      width: 100%; /* Make the button full width on mobile */
    }

    /* Adjust the space between Contact Us header and content */
    #products {
      margin-bottom: 10px;
      padding-top: 5px;
      padding-bottom: 10px;
    }

    /* Reduce the margin on form sections */
    .container-xxl {
      padding: 2rem 1rem; /* Adjust overall padding for smaller screens */
    }

    .col-md-6 {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .display-6 {
      font-size: 1.8rem; /* Reduce the font size on smaller screens */
    }
  }

  @media (max-width: 576px) {
    /* For even smaller screens, reduce font size more and padding */
    .display-6 {
      font-size: 1.5rem;
    }

    /* Button full width for mobile */
    .btn-primary {
      width: 100%;
    }

    /* Ensure proper alignment of form fields */
    .col-md-6, .col-12 {
      padding-left: 0;
      padding-right: 0;
    }
  }

  @media (max-width: 767px) {
    iframe {
      height: 300px; /* Adjust the height on mobile */
    }
  }


  /* Footer Padding Adjustments */
.bg-footer {
    padding-top: 20px;  /* Increased padding at the top of the footer */
    padding-bottom: 40px; /* Increased padding at the bottom of the footer */
  }
  
  /* Content Shift (Move content closer to Google Maps) */
  #contactForm {
    margin-top: -30px ;  /* Move the contact form closer to the map (adjust as needed) */
  }
  
  /* Adjust the footer text and elements for better padding */
  .container-fluid.bg-footer .container {
    padding-left: 30px;
    padding-right: 30px;  /* More space on the left and right */
  }
  
  .container-fluid.bg-footer .row {
    padding-top: 10px;  /* Slight padding on top of each row */
  }
  
  footer {
    padding-top: 30px;  /* Add padding to the top of the footer section */
    padding-bottom: 20px;  /* Add padding to the bottom for spacing */
  }
  
  /* Optional: Adjust on smaller screens */
  @media (max-width: 768px) {
    .bg-footer {
      padding-top: 30px;  /* Reduce top padding on smaller screens */
      padding-bottom: 30px;  /* Reduce bottom padding on smaller screens */
    }
  
    #contactForm {
      margin-top: -20px;  /* Adjust for small screens */
    }
  }