/*
File: [index.css]
Created on: [2024-09-12 at 1:36 PM]
Author: [Ángel García Feliciano]

Description:
This CSS file provides styles for the main landing page of the application.
It includes designs for the search section, form controls, buttons, services
section, and pagination. The file ensures a visually appealing and responsive
layout.

Key Features:
- Styled dropdown and form controls.
- Search section with a modern design and shadow effects.
- Button styles with padding and font adjustments.
- Services section with consistent typography.
- Pagination with hover and active state effects.

Sections:
1. Form Controls
2. Search Section
3. Buttons
4. Dropdown Styling
5. Navbar Login Button
6. Services Section
7. Pagination
*/

select.form-control {
  color: black;
}

select.form-control option {
  color: black;
}

.search-wrap-1 {
  padding: 40px;
  background: #21243d;
  -webkit-box-shadow: 0px 75px 94px -66px rgba(0, 0, 0, 0.66);
  -moz-box-shadow: 0px 75px 94px -66px rgba(0, 0, 0, 0.66);
  box-shadow: 0px 75px 94px -66px rgba(0, 0, 0, 0.66);
  border-radius: 10px;
}

.search-property-1 .form-group {
  margin-bottom: 30px;
}

.form-control {
  height: 60px;
  font-size: 18px;
}

.btn-search {
  width: auto;
  padding: 20px 40px;
  font-size: 14px;
  height: auto;
  display: inline-block;
}

.form-field.d-inline-block {
  width: auto;
}

.select-wrap {
  padding: 10px;
  background-color: #33383d;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.select-wrap .form-control {
  border: none;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}

.navbar-toggler.collapsed ~ .navbar-collapse .btn-login {
  background-color: #000;
  color: #fff;
}

.navbar-toggler.collapsed ~ .navbar-collapse .btn-login:hover {
  background-color: #333;
  color: #fff;
}

.services-section {
  color: #000000;
}

.services-section h3 {
  color: #000000;
}

.services-section p {
  color: #000000;
}

.services-section .icon span {
  color: #000000;
}

.block-27 ul li a,
.block-27 ul li span {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.block-27 ul li a:hover,
.block-27 ul li span:hover {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}

.block-27 ul li.active a,
.block-27 ul li.active span {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}

/* Styles for the login button */
.login-container {
  position: absolute;
  right: 18px;
  top: 35px;
}

.btn-login {
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background-color: #28a745;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.btn-login:hover {
  background-color: #218838;
  color: #fff;
}

/* Prevent the navbar container from shifting */
.navbar .container {
  position: relative;
  width: calc(100% - 150px);
}

/* Adjustments for small screens */
@media (max-width: 767px) {
  .login-container {
    right: 10px;
    top: 20px;
  }

  .btn-login {
    width: 100%;
    text-align: center;
  }

  .navbar .container {
    width: 100%;
  }
}

.hero-wrap {
  width: 100%;
  height: 450px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: 0;
}

.slider-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding-top: 200px;
}

.search-property-1 .form-group {
  margin-bottom: 10px;
}

.ftco-section {
  padding: 1em 0;
  position: relative;
}

@media (max-width: 767.98px) {
  .ftco-section {
    padding: 6em 0;
  }
}

.cfm-filter-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 9px 15px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

/* Styles for the arrows in the number field */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
}

/* To keep the arrows, you can try using this shadow as an alternative */
input[type="number"] {
  color: black;
  text-shadow: 0 0 0 black;
}

/* Hover effect for the Search button */
.btn-search {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.property-wrap .img .rent-sale .sale {
  background: #24a148;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 4px 10px;
}

.property-wrap .img .rent-sale .rent {
  background: #007bff;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 4px 10px;
}

.property-wrap .img .rent-sale .optioned {
  background: #ffc107; /* Yellow for optioned */
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 4px 10px;
}

.property-wrap .img .rent-sale .sold {
  background: #dc3545; /* Red for sold */
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  padding: 4px 10px;
}

/* Style for the button when it's in the active state */
.cfm-filter-btn.active {
  background-color: #ddd;
  color: #28a745;
  box-shadow: 0 0 10px rgba(34, 139, 34, 0.3);
}

/* General styles for the filter box */
.search-wrap-1 {
  background-color: #c4c4c4;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

/* "More Options" button styles */
.cfm-filter-btn {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 9px 15px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.cfm-filter-btn:hover {
  background-color: #ccc;
  box-shadow: 0 0 10px rgba(34, 139, 34, 0.3);
}

/* Styling for search and clear buttons */
.btn-search,
.btn-clear {
  padding: 8px 20px;
  font-size: 20px;
}