/* Home Page Custom Styles */

/* Warning2 Color Scheme */
.bg-warning2 {
    background-color: var(--primary-color) !important;
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--primary-color) !important;
    --bs-btn-border-color: var(--primary-color) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #0a5a73 !important;
    --bs-btn-hover-border-color: #0a5a73 !important;
    --bs-btn-focus-shadow-rgb: 1, 68, 91 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #0a5a73 !important;
    --bs-btn-active-border-color: #0a5a73 !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--primary-color) !important;
    --bs-btn-disabled-border-color: var(--primary-color) !important;
}

/* Explore Button Styling */
.btn-explore {
    /* background: linear-gradient(135deg, var(--primary-color) 70%, #0a5a73 100%) !important; */
    background: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(1, 68, 91, 0.3) !important;
}

.btn-explore:hover {
    background: linear-gradient(135deg, #0a5a73 0%, var(--primary-color) 100%) !important;
    border-color: #0a5a73 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(1, 68, 91, 0.4) !important;
}

/* Text Colors */
.text-warning2 {
    color: var(--primary-color) !important;
}

.text-warning2:hover {
    color: #0a5a73 !important;
}

/* Icon Colors */
.icon-light {
    color: #e0f2f1 !important;
}

.icon-light:hover {
    color: #b2dfdb !important;
}

/* Border Colors */
.border-warning2 {
    border-color: var(--primary-color) !important;
}

.border-warning2:focus {
    border-color: #0a5a73 !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 68, 91, 0.25) !important;
}

/* Dropdown Styling */
.form-control[type="select"],
select.form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    backdrop-filter: blur(10px) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    padding-right: 35px !important;
    position: relative !important;
    font-weight: 500 !important;
}

.form-control[type="select"]:focus,
select.form-control:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #0a5a73 !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 68, 91, 0.25) !important;
    color: var(--primary-color) !important;
    outline: none !important;
}

.form-control[type="select"] option,
select.form-control option {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.form-control[type="select"] option:hover,
select.form-control option:hover {
    background-color: #0a5a73 !important;
    color: #fff !important;
    font-weight: 500 !important;
}

.form-control[type="select"] option:checked,
select.form-control option:checked,
.form-control[type="select"] option:selected,
select.form-control option:selected {
    background-color: #0a5a73 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.form-control[type="select"] option:disabled,
select.form-control option:disabled {
    background-color: #2a2a2a !important;
    color: #999 !important;
    font-style: italic !important;
}

/* Custom Arrow for Dropdown */
.input-group:has(select)::after {
    content: '\f107';
    font-family: 'IcoFont';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #e0f2f1;
    pointer-events: none;
    z-index: 10;
    font-size: 14px;
}

.input-group:has(select) {
    position: relative;
}

/* Input field text color */
.form-control {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
}

.form-control::placeholder {
    color: var(--primary-color) !important;
    opacity: 0.7 !important;
}

.form-control:focus {
    color: var(--primary-color) !important;
}

/* Responsive padding adjustments for hero section */
@media (max-width: 992px) {
  .wide-tb-70 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

@media (max-width: 576px) {
  .wide-tb-70 {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
  }
}

/* === HERO BUTTON IMPROVEMENT === */
.wide-tb-70 .btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.2s ease-in-out;
}

/* Gradient primary button */
.wide-tb-70 .btn-primary-gradient {
  background: linear-gradient(90deg, #0078b7 0%, #00b9e8 100%);
  color: #fff !important;
  border: none;
  box-shadow: 0 8px 20px rgba(0, 123, 183, 0.3);
}
.wide-tb-70 .btn-primary-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 123, 183, 0.4);
}

/* Outline secondary button */
.wide-tb-70 .btn-outline-light {
  border: 2px solid #fff;
  color: #fff !important;
  background: transparent;
}
.wide-tb-70 .btn-outline-light:hover {
  background: #fff;
  color: #0078b7 !important;
}

/* === MOBILE OPTIMIZATION === */
@media (max-width: 576px) {
  .wide-tb-70 .d-flex {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .wide-tb-70 .btn {
    width: 100%;
    font-size: 0.95rem;
    padding: 12px 0;
  }
}

/* === BLUE STRIP (GLOBAL LOGISTICS) REFINEMENT === */
.slim-global {
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -16px; /* visually attach it to hero */
  position: relative;
  z-index: 5;
}
.slim-global .d-flex {
  padding: 8px 0;
}
.slim-global .rounded-circle {
  width: 60px !important;
  height: 60px !important;
}
.slim-global i {
  font-size: 26px !important;
}
@media (max-width: 576px) {
  .slim-global .rounded-circle {
    width: 50px !important;
    height: 50px !important;
  }
  .slim-global i {
    font-size: 22px !important;
  }
}