/*
Template: africaterrain
Theme Name: Africa Terrain Child Theme
Theme URI: http://www.prickdezigns.com
Description: <strong>A superflexible and responsive Tours and travel theme by Prick Dezigns</strong>.
Version: 1.50
Author: Prick Dezigns
Author URI: https://www.facebook.com/prickdezigns
License: Prick Dezigns Licence
License URI: -

*/
/************************************************************************************
Put your custom CSS below this block :)
*************************************************************************************/

.font-bold {
    font-weight: 700;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
} 

.mb-4 {
    margin-bottom: 1rem;
}

.text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    
.centr {
    text-align: center;
    color: white;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-center {
    text-align: center;
}
.mb-8 {
    margin-bottom: 2rem;
}

.max-w-2xl {
    max-width: 42rem;
}
.justify-center {
    justify-content: center;
}

.text-secondary {
    color: #fda221;
    text-align:center;
}

.text-sm {
    font-size: 14px;
    line-height: 1.5; /* Minimum line height */
    display: block;
    margin-bottom: 0; /* Removed margin entirely */
}

.text-gray-700 {
    color: #364153;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 0.75;
}

.rounded-lg {
    border-radius: 10px;
}

.p-4 {
    padding: 16px;
}

.space-y-1 {
}

.py-1 {
    padding-block: 4px;
}

.text-brand-primary
 {
    color: #812e0c;
}

.font-semibold {
    font-weight: 600;
}

.mb-2 {
    margin-bottom:8px;
}

.gap-2

 {
    gap: 4px;
}


.flex-wrap {
    flex-wrap: wrap;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1.33;
}

.text-brand-secondary {
    color: #fda221;
}

.mr-2 {
    margin-right: 8px;
}

.py-1 {
    padding-block: 0.25rem;
}

.px-2 {
    padding-inline: 0.25rem;
}

.bg-gray-50 {
    background-color: #fbf9fa;
}

.p-3 {
    padding: 12px;
}

.mb-16 {
    margin-bottom:16px;
}

.text-pretty {
    text-wrap: pretty;
}

.text-amber-600 {
    color:#d97706;
}

.tracking-tight {
    letter-spacing: -.025em;
}

.leading-none {
    line-height: 1;
}

.max-w-3xl {
    max-width: 758px;
}

.rounded {
    border-radius: 0.25rem;
}

.abtbtn {
  background: #faa629;
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  color: #000000;
  font-size: 16px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.abtbtn:hover {
  background: #d48f2f;
  text-decoration: none;
    color: #000000;
}

.cntbtn {
   border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 2px;
  text-decoration: none;
}

.cntbtn:hover {
     background:#943e21;
  text-decoration: none;
    color: #ffffff;
}

.main-button {
     color: #812e0c;
    border-style: solid;
    border-color: #812e0c;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-weight: 500;
    border-radius: 3px;
    padding: 9px 14px 10px;
    border-width: 1px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
        }
        .main-button:hover {
            background: #812e0c;
            color: #fff;
        }

.button-container {
      text-align: center;
      display: flex;
      justify-content: center;
      gap: 20px; /* Space between buttons */
    }

.abcard {
    background-color: white;
    border: 1px solid #e4dbcd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 2rem 1.5rem;
    transition: all 0.3s;
    margin-bottom: 20px;
}
 .abcard:hover {
      transform: translateY(-5px); 
      box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    }

    .about-card {
      text-align: center;
      margin: 20px auto;
      max-width: 300px;
      padding: 20px;
      background-color: white; /* Updated */
      border: 1px solid #e4dbcd; /* Updated */
      border-radius: 8px; /* Updated */
      overflow: hidden; /* Updated */
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Updated */
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .about-card:hover {
      transform: translateY(-5px); 
      box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    }

    .about-card i {
      color: #faa629;
      display: block;
      margin-bottom: 16px; /* Increased for more spacing */
    }

    .about-card h3 {
      margin: 12px 0; /* Adjusted for better separation */
      font-size: 1.2rem;
      font-weight: bold;
    }

    .about-card p {
      font-size: 0.95rem;
      line-height: 1.5;
      margin: 0;
    }
    
    .about-card-no-top {
      width: 100%; /* Ensure full width within max-width */
      padding: 20px;
      background-color: white;
      border-left: 1px solid #e4dbcd; /* Side border */
      border-right: 1px solid #e4dbcd; /* Side border */
      border-bottom: 1px solid #e4dbcd; /* Bottom border */
      border-top: none; /* No top border */
      border-radius: 0 0 8px 8px; /* Only round bottom corners */
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      margin-bottom: 20px;
    }
    
    .about-card-no-top:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    }
    
   .round-image,
.round-image img {
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden;
  display: block;
}

.px-3 {
    padding-inline: 0.25rem;
}

.rounded-full {
    border-radius: calc(infinity * 1px);
}

/* Mobile styles */
    @media (max-width: 600px) {
      .button-container {
        flex-direction: column; /* Stack buttons vertically */
        gap: 10px; /* Reduced gap for mobile */
      }

      .abtbtn, .cntbtn {
        font-size: 14px; /* Slightly smaller font */
        padding: 8px 16px; /* Reduced padding */
        width: 100%; /* Full width for buttons */
        max-width: 250px; /* Limit button width */
        margin: 0 auto; /* Center buttons */
      }
    }
    
/* Target only Contact Form 7 inputs inside .wpcf7 form */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}
.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.form-field label {
    margin-bottom: 6px;
    color: #812e0c;
    font-weight: 500;
}

/* Override default WooCommerce / CF7 styles */
input[type="text"], 
input[type="email"], 
input[type="tel"], 
input[type="password"], 
textarea, 
#coupon_code {
    color: #4e3118 !important; /* Force override */
    background-color: #fefbf5;
    border: 1px solid #e5e5e5;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
}


input::placeholder,
textarea::placeholder {
    color: #9ca3ae;
}

input:focus, 
textarea:focus {
    border-color: #8f5b2d !important;
    outline: none;
}

/* Force textarea full width */
textarea {
    width: 100% !important;
    min-height: 120px;
    resize: vertical;
}

/* Submit button */
.submit-wrap {
    margin-top: 20px;
}
.wpcf7-submit {
    background-color: #8f5b2d;
    color: #fefbf5;
    border: none;
    padding: 12px 20px;
    font-size: 15px !important;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}
.wpcf7-submit:hover {
    background-color: #70421f;
}
.wpcf7-submit i {
    font-size: 16px;
}

/* Responsive: Stack fields on smaller screens */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
    .form-field {
        min-width: 100%;
    }
}

/**migration***/

.migration-calendar {
      margin: 40px auto;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      text-align: center;
    }

    .migration-calendar h2 {
      font-size: 1.8rem;
      margin-bottom: 20px;
      font-weight: 700;
      color: #1a202c;
    }

    .months {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 20px;
      flex-wrap: nowrap; /* all months in one row */
      overflow-x: auto; /* scroll if screen is too small */
      padding-bottom: 6px;
    }

    .month-wrapper {
      flex: 1 0 auto; /* allow shrinking and equal sizing */
      min-width: 70px; /* ensures readability on small screens */
      text-align: center;
    }

    .month-label {
      font-size: 0.75rem;
      margin-bottom: 6px;
      display: block;
      font-weight: 500;
    }

    .month {
      height: 20px;
      border-radius: 6px;
      font-weight: 500;
      background: #e2e8f0; /* default grey */
    }

    /* Status colors */
    .month.peak {
      background: #f6ad55; /* orange */
    }

    .month.calving {
      background: #48bb78; /* green */
    }

    .month.off {
      background: #e2e8f0; /* light grey */
    }

    /* Legend styles */
    .legend {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      font-size: 0.9rem;
      margin-top: 10px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-item::before {
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 4px;
      display: inline-block;
    }

    .legend-item.peak::before {
      background: #f6ad55;
    }

    .legend-item.calving::before {
      background: #48bb78;
    }

    .legend-item.off::before {
      background: #e2e8f0;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .month-wrapper {
        min-width: 60px;
      }
      .month-label {
        font-size: 0.8rem;
      }
      .month {
        height: 25px;
      }
    }

    @media (max-width: 480px) {
      .month-wrapper {
        min-width: 50px;
      }
      .month-label {
        font-size: 0.75rem;
      }
      .month {
        height: 22px;
      }
    }

/**end of migration***/
.reviews-vertical {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    border-radius: 12px;
    height: 450px; /* Fixed height */
    box-sizing: border-box;mb
}

/* Custom scrollbar styling */
.reviews-vertical::-webkit-scrollbar {
    width: 4px;
}

.reviews-vertical::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.reviews-vertical::-webkit-scrollbar-thumb {
    background: #ae3f14; /* Secondary color */
    border-radius: 8px;
}

.reviews-vertical::-webkit-scrollbar-thumb:hover {
    background: #e6951e; /* Hover color */
}

/* Style each review block */
.reviews-vertical .dd80742950baa > div {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 15px auto;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #333;
}

/* Last review margin */
.reviews-vertical .dd80742950baa > div:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .reviews-vertical .dd80742950baa > div {
        max-width: 90%;
    }
}

/*************************************************************************/