/* Default font override */
html, body {
    font-family: 'Inter', sans-serif !important;
}

/* Headings override */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif !important;
}



.d-none { display: none; }
.text-danger { color: #d32f2f; }

.footer-section {
  background: #161917;
  padding: 60px 0 40px 0;
  color: #fff;
}

.footer-container {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 100% !important;
}

@media (max-width: 991px) {
  .footer-container {
    margin: 0 !important;
  }
}

@media (max-width: 375) {
  .footer-container {
    margin: 0 !important;
  }
}

@media (max-width: 480) {
  .footer-container {
    margin: 0 !important;
  }
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-logo img {
  width: 250px;
  height: auto;
}

.footer-description {
  
  font-weight: 400;
  font-size: 16px;
  line-height: 170%;
  color: #cfcfcf;
  text-transform: uppercase;
  margin-top: 10px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  
  font-size: 18px;
  color: #d6d6d6;
  text-decoration: none;
  line-height: 24px;
  transition: color .3s ease;
}

.footer-links a:hover { color: #2f7d32; }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  
  font-size: 18px;
}

.contact-icon { flex-shrink: 0; }

.email-subscription {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.subscription-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 40px;
  overflow: hidden;
  width: 320px;
  height: 48px;
  background: transparent;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  stroke: #999;
}

.subscription-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 110px 12px 45px;
  color: #fff;
  
  font-size: 15px;
}

.subscription-wrapper input::placeholder { color: #999; }

.subscription-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  background: #2f7d32;
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: 0 22px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background .3s ease;
}

.subscription-btn:hover { background: #329f61; }

.footer-copyright {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #333;
  text-align: center;
  
  font-size: 14px;
  color: #999;
}

.footer-copyright p {
  background-color: #2F7D32;
  color: #000;
  font-size: 16px;
  padding: 10px 0;
  margin: 0;
  line-height: 1.4;
  
}

:root{
  --bg:#000;
  --bg-2:#0f0f0f;
  --panel:#1a1a1a;
  --panel-2:#2a2a2a;
  --text:#fff;
  --muted:#d6d6d6;
  --muted-2:#cfcfcf;
  --line:#333;
  --brand:#2f7d32;
  --brand-2:#329f61;
  --brand-3:#1b5e20;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{
  background:#161917;
  color:#fff;
  overflow-x:hidden;
}



.page-wrap{
  padding:140px 10vw 80px;
  background:#111;
}

.reg-container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:40px;
}

.sidebar{
  width:320px;
  background:var(--panel);
  padding:30px;
  border-radius:10px;
}

.sidebar h2{
  text-align:center;
  margin-bottom:30px;
  font-weight:800;
}

.step{
  display:flex;
  margin-bottom:28px;
  position:relative;
}

.step-number{
      width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center;
      margin-right:16px; font-weight:700; font-size:16px; flex-shrink:0; position:relative; z-index:2;
      background:#333; color:#666; border:1px solid #444;
    }
    .step-title{font-size:16px; font-weight:700; margin-bottom:6px}
    .step-description{font-size:13px; line-height:1.5; color:#999}
    .step-optional{font-size:12px; color:#777; font-weight:400; margin-left:6px}

    .step.active .step-number{ background:linear-gradient(135deg,#4CAF50,#2E7D32); color:#fff; box-shadow:0 2px 8px rgba(76,175,80,0.25) }
    .step.completed .step-number{ background:linear-gradient(135deg,#4CAF50,#2E7D32); color:#fff }
    .step.active .step-title, .step.completed .step-title{ color:#4CAF50 }
.step:not(:last-child)::after{
  content:'';
  position:absolute;
  left:19px;
  top:40px;
  width:2px;
  height:calc(100% + 8px);
  background:#333;
}

.step.completed:not(:last-child)::after{ background:#4CAF50; }

.content{
  flex:1;
  background:var(--panel);
  padding:38px;
  border-radius:10px;
}

.content h1{
      font-size:28px; margin-bottom:10px; color:#fff; font-weight:800; letter-spacing:-0.2px;
    }

    .content p{ color:#c9c9c9; margin-bottom:26px; font-size:16px;}


.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.form-group{ display:flex; flex-direction:column; }
.form-group.full-width{ grid-column:1/-1; }

label{
  color:#fff;
  margin-bottom:8px;
  font-size:14px;
  font-weight:600;
}

input[type="text"],input[type="email"],input[type="password"],input[type="tel"],select,textarea{
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel-2);
  color:#fff;
  font-size:14px;
  transition:.25s;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--brand);
  outline:none;
}

.required{ color:#ff4d4d; }

.password-input-wrapper{ position:relative; }
.password-input-wrapper input{ padding-right:50px; }
.password-toggle{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  color:#888;
  font-size:18px;
}



 /* checkboxes */
    .checkbox-group{ margin-bottom:24px }
    .checkbox-item{
      display:flex; align-items:flex-start; margin-bottom:16px; padding:14px; background:var(--panel-2); border-radius:8px;
    }
    .checkbox-item input[type="checkbox"]{
      margin-right:14px; margin-top:2px; width:18px; height:18px; accent-color:var(--brand);
    }
    .checkbox-item label{ color:#e9e9e9; font-size:14px; line-height:1.5; margin:0;}



.btn{ padding:14px 26px; border:none; border-radius:8px; font-size:16px; font-weight:800; cursor:pointer; transition:all .25s ease; text-decoration:none; display:inline-block; text-align:center; }
    .btn-primary{ background:var(--brand) !important; color:#fff }
    .btn-primary:hover{ background:#1e5a24 !important}
    .btn-secondary{ background:transparent; color:#c1c1c1; border:1px solid #3c3c3c }
    .btn-secondary:hover{ color:#fff; border-color:#555 }
    .btn-full-width{ width:100%; margin-bottom:16px }

.button-group{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
}

.step-content{ display:none; }
.step-content.active{ display:block; }




@media (max-width: 1200px){
  .reg-container{ flex-direction:column; gap:28px; }
  .sidebar{ width:100%; }
}

@media (max-width: 992px){
  .page-wrap{ padding:80px 10px 40px; }
  .reg-container{ flex-direction:column; gap:18px; }

  .sidebar{ width:100%; padding:18px; margin-bottom:18px; }
      .content{ padding:16px; width:100%; }
      .form-grid{ grid-template-columns:1fr; gap:14px; }
      .button-group{ flex-direction:column; gap:10px; }
}

 @media (max-width: 1100px){ .reg-container{ flex-direction:column } .sidebar{ width:100% } }

@media (max-width: 768px){
    .step-number{ width:30px; height:30px; font-size:12px; }
 
  .page-wrap{ padding:60px 4px 20px; }
  .sidebar{ padding:12px; }
  .form-grid{ grid-template-columns:1fr; gap:10px; }
  .btn{ font-size:13px; }
}

@media (max-width: 480px){
  .sidebar{ padding:8px; }
  .footer-content{
    grid-template-columns:1fr;
    text-align:center;
    gap:20px;
  }
  .footer-logo img{ width:120px; }
  .footer-description{ font-size:12px; }
  .footer-links a{ font-size:13px; }
  .contact-item{ justify-content:center; font-size: 15px;}
  .subscription-wrapper{ max-width:280px; }
  .footer-copyright p{
    font-size:12px;
    padding:6px 2px;
  }
}


/* ========================================================
   NEW CSS — BLOG PAGE (Only UNIQUE classes added)
   Duplicate classes automatically skipped.
======================================================== */

.blog-page{
  min-height:100vh;
  background:var(--bg);
}

.blog-hero {
  position: relative;
  width: 100%;
  min-height: 320px;
  background-image: url('{{ asset('assets/img/blog-hero-sample.jpg') }}');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 60px 0;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.85) 70%,rgba(0,0,0,0.95) 100%);
  z-index: 0;
}

.blog-hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-left: 5vw;
}

.blog-category {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #cfcfcf;
  margin-bottom: 10px;
  
}

.blog-title {
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
  color: #fff;
}

.blog-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
  position: relative;
}

.blog-details-card {
  padding: 40px 40px 48px;
}

.blog-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.blog-main { flex: 3; }
.blog-sidebar { flex: 1.4; }

.blog-main p {
  
  font-size: 15px;
  line-height: 1.8;
  color: #cfcfcf;
  margin-bottom: 16px;
}

.blog-main h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 26px 0 12px;
}

.blog-main ul {
  margin: 0 0 18px 18px;
  padding-left: 10px;
  color: #cfcfcf;
  
  font-size: 15px;
  line-height: 1.7;
}

.blog-image {
  margin: 26px 0 30px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.blog-image img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 14px;
}

.author-card {
  background: #1c1c1c;
  border-radius: 14px;
  padding: 20px 18px;
  border: 1px solid rgba(255,255,255,0.04);
}

.author-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-meta-title {
  font-size: 14px;
  font-weight: 600;
}

.author-meta-role {
  font-size: 13px;
  color: #cfcfcf;
  
}

.author-date {
  font-size: 12px;
  color: #cfcfcf;
  margin-bottom: 4px;
}

.author-separator {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 10px 0 14px;
}

.author-info-text {
  font-size: 13px;
  color: #cfcfcf;
  line-height: 1.6;
  
}

.assist-bubble{
  position:fixed;
  bottom:30px;
  right:30px;
  width:90px;
  height:90px;
  border-radius:50%;
  background:#ffffff;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
}

.assist-inner{
  position:relative;
  width:70px;
  height:70px;
  border-radius:50%;
  background:#3b82f6;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:32px;
}

.assist-user{
  position:absolute;
  bottom:-4px;
  right:-6px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:3px solid #ffffff;
  background:#f97373;
  overflow:hidden;
}

.assist-user img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(max-width:768px){
  .assist-bubble{ width:70px; height:70px; bottom:18px; right:18px; }
  .assist-inner{ width:56px; height:56px; font-size:26px; }
  .assist-user{ width:26px; height:26px; }
  .blog-layout{ flex-direction: column; }
}

@media(max-width:480px){
  .blog-title{ font-size:28px; }
  .blog-wrapper{ padding:0 12px 40px; }
  .form-group{ margin-bottom:8px; }
}

.button-container{ margin-top:16px }
.password-group{ margin-top:6px; width:100% }
    .password-input-wrapper{ position:relative }
    .password-input-wrapper input{ padding-right:50px; width:100% }
    .password-toggle{ position:absolute; right:15px; top:50%; transform:translateY(-50%); cursor:pointer; color:#888; font-size:18px }
.form-group{ display:flex; flex-direction:column }
    .form-group.full-width{ grid-column:1/-1 }
    .btn-full-width{ width:100%; margin-bottom:16px }
    .login-link{ text-align:center; color:#bdbdbd; font-size:14px }
    .login-text{ color:var(--brand); text-decoration:none; font-weight:800 }
    .login-text:hover{ color:#1e5a24 }
       .upload-section{ margin-bottom:20px }
    .upload-area{
      border:2px dashed #333; border-radius:10px; padding:34px; text-align:center; background:var(--panel-2); cursor:pointer; transition:all .25s ease;
    }
    .upload-area:hover{ border-color:var(--brand); background:#333 }
    .upload-icon{ font-size:42px; color:#888; margin-bottom:10px }
    .upload-text{ color:#fff; font-size:15px; margin-bottom:6px;}
    .upload-hint{ color:#aaa; font-size:13px;}

    .question-answer p {
       font-weight: 400; font-style: normal; font-size: 20px; line-height: 140%; letter-spacing: -0.01em;
    }

    @media (max-width: 768px) {
  .hero-section .logo {
    display: none !important;
  }
}

.blog-section {
  background: #232323;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-container {
  width: 100%;
  padding: 0 20px;
}



.blog-carousel {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
}

.blog-cards-wrapper {
  display: flex;
  gap: 25px;
  justify-content: center;
}

.blog-card,
#affiliatesWrapper .blog-card {
  flex: 0 0 calc((100% / 3) - 17px);
  max-width: 400px;
  min-width: 280px;
  background: #1d1d1d;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 480px;           /* Fixed height for all cards */
  max-height: 480px;       /* Prevents cards from growing too tall */
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-img,
#affiliatesWrapper .blog-img {
  width: 100%;
  height: 240px;           /* Fixed height for all images */
  /* object-fit: contain;  */
  object-position: center; /* Center the image for best crop */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: block;
}

/* Content */
.blog-content,
#affiliatesWrapper .blog-content {
  padding: 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  justify-content: flex-start;
}




.blog-content p,
#affiliatesWrapper .blog-content p,
.blog-desc, .blog-desc h1,
#affiliatesWrapper .blog-desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;   /* 5 lines visible */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color:#cfcfcf; margin-bottom:12px;
}

/* Button */
.blog-btn {
  color: #2e7d32;
  font-weight: 600;
  font-size: 16px;
  background: none;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  margin-top: auto;
}

.blog-btn:hover {
  color: #2f7d32;
}


/* Arrows */
.blog-navigation {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.blog-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.blog-arrow-left {
  background: #2e2e2e;
}

.blog-arrow-right {
  background: #2e7d32;
}

.blog-arrow:hover {
  transform: scale(1.1);
}

/* ======= Responsive ======= */
@media (max-width: 992px) {
  .blog-card {
    flex: 0 0 calc(50% - 12.5px);
  }
}

@media (max-width: 768px) {
  .blog-navigation {
    margin-top: 0px !important;
  }
  #blogWrapper .blog-card {
    display: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #232323;
    border-radius: 14px;
    width: 96vw !important;
    max-width: 420px;
    margin: 0 auto 24px auto;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
    padding: 16px 8px 24px 8px;
  }
  #blogWrapper .blog-card.active {
    display: flex !important;
  }
  #blogWrapper .blog-img {
    width: 100%;
    max-width: 370px;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 18px;
    display: block;
  }
  #blogWrapper .blog-content {
    padding: 0 8px;
    text-align: left;
    width: 100%;
  }
  #blogWrapper .blog-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #fff;
    font-weight: 700;
  }
  #blogWrapper .blog-content p,
  #blogWrapper .blog-desc {
      display: -webkit-box;
    -webkit-line-clamp: 3;   /* 3 lines visible on mobile */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    color: #cfcfcf;
    margin-bottom: 20px;
    line-height: 1.6;
    /* font-size: 14px;
    color: #cfcfcf;
    margin-bottom: 10px;
    line-height: 1.6; */
  }
  #blogWrapper .blog-btn {
    font-size: 14px;
    padding: 8px 18px;
    border-radius: 20px;
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .blog-img {
    height: auto;
  }
}




/* FAQ Section Styles */
    .faq-section {
      background: #232323;
      padding: 80px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .faq-container {
      max-width: 1200px;
      width: 100%;
      padding: 0 20px;
    }

    

    .faq-container h3 {
      color: #fff;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 1px;
      margin-bottom: 50px;
      text-align: center;
    }

    .faq-content {
      display: flex;
      gap: 110px;
      align-items: flex-start;
      margin-top: 50px;
    }

    .faq-categories {
      flex: 0 0 300px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .category-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 600;
    }

    .category-item:hover {
      background: #2a2a2a;
    }

    .category-item.active {
      background: #2a2a2a;
    }

    .category-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #56605f;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .category-icon.general-icon {
      background: #2f7d32;
    }

    .faq-questions {
      flex: 1;
      min-height: 400px;
    }

    .questions-category {
      display: none;
    }

    .questions-category.active {
      display: block;
    }

    .question-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      border-bottom: 1px solid #3a3a3a;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #fff;
      font-size: 1.1rem;
      font-weight: 500;
    }

    .question-item:hover {
      color: #2f7d32;
    }

    .question-item:last-child {
      border-bottom: none;
    }

    .question-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #3a3a3a;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .question-item.active .question-icon {
      transform: rotate(180deg);
    }


    /* ======= Responsive FAQ Section ======= */

/* Tablet (≤992px) */
@media (max-width: 992px) {
  .faq-section {
    padding: 60px 0;
  }

  .faq-content {
    gap: 60px;
  }

  .faq-categories {
    flex: 0 0 250px;
  }

  .question-item span,
  .question-answer p {
    font-size: 20px !important;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .faq-section {
    padding: 50px 0;
  }

  .faq-container {
    padding: 0 15px;
  }

  

  .faq-content {
    flex-direction: column; /* Stack categories above questions */
    gap: 30px;
    align-items: center;
    margin-top: 30px;
  }

  .faq-categories {
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .category-item {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
    padding: 12px 10px;
  }

  .faq-questions {
    width: 100%;
  }

  .question-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .question-item span {
    font-size: 18px !important;
  }

  .question-answer p {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 40px 0;
  }

  

  .faq-categories {
    flex-direction: column;
    align-items: stretch;
  }

  .category-item {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 15px;
  }

  .question-item span {
    font-size: 16px !important;
  }

  .question-answer p {
    font-size: 15px !important;
  }

  .faq-content {
    gap: 20px;
  }
}


  /* ===================== Provider Section Vertical ===================== */
.provider-section-vertical {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.provider-card-vertical {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  overflow: hidden;
}

.provider-card-vertical img {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* ---------- Content ---------- */
.provider-card-content-vertical {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 4rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 60%;
  margin-top: 0%;
}



.provider-card-content-vertical p {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #f0f0f0;
}

.provider-btn-vertical {
 background-color: transparent;
  color: #fff;
  border: 1px solid #2e7d32;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  
  transition: all 0.3s ease;
}

.provider-btn-vertical:hover {
  background-color: #2e7d32;
  color: #fff;
}

/* ======= Responsive Styles ======= */

/* Tablet (≤992px) */
@media (max-width: 992px) {
  .provider-card-content-vertical {
    max-width: 60%;
    padding: 50px 35px 40px 35px;
    margin-top: 6%;
  }

  .provider-card-content-vertical h2 {
    font-size: 42px;
    line-height: 1.2;
  }

  

  .provider-btn-vertical {
    font-size: 18px;
    padding: 10px 28px;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .provider-card-content-vertical {
    position: relative;
    text-align: center;
    background: rgba(0, 0, 0, 0.55); /* Optional overlay for readability */
    padding: 40px 20px;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    align-items: center;
    margin-top: 0;
  }

  .provider-card-content-vertical h2 {
    font-size: 32px;
    margin-bottom: 15px;
  }

 

  .provider-btn-vertical {
    font-size: 16px;
    padding: 10px 24px;
  }
}

/* Small Phones (≤480px) */
@media (max-width: 480px) {
  .provider-card-vertical {
    height: auto; /* Prevent clipping */
  }

  .provider-card-content-vertical {
    padding: 30px 15px;
  }

  .provider-card-content-vertical h2 {
    font-size: 26px;
  }

  .provider-btn-vertical {
    font-size: 15px;
    padding: 8px 20px;
  }
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .provider-card-content-vertical p {
        font-size: 19px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .provider-card-content-vertical p {
        font-size: 18px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .provider-card-content-vertical p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .provider-card-content-vertical p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .provider-card-content-vertical p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .provider-card-content-vertical p {
        font-size: 14px;
        max-width: 360px;
    }
}



   /* ===== WHY CHOOSE US SECTION ===== */
.why-section {
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto 0px auto;
  padding: 60px 20px 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  background-color: #161917;
  /* border-radius: 12px; */
  
}

/* Title & Sub */


.why-sub {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: center;
  /* margin-bottom: 25px; */
  line-height: 1.4;
  max-width: 800px;
  color: #ccc;
}

/* Badge */
.why-badge-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0 30px 0;
}

/* Mobile screens */
@media (max-width: 600px) {
    .why-badge-row {
        flex-direction: column;
        align-items: center;
    }

    .why-badge-row > * {
        width: 100%;
        max-width: 320px; /* optional, button bohat wide na ho */
    }
}


.why-badge {
    cursor: pointer;
    padding: 10px 24px;
    border-radius: 22px;
    border: 1.5px solid #2e7d32;
    font-weight: 600;
    font-size: 1rem;
    color: #2e7d32;
    background: transparent;
    transition: all 0.25s ease;
}

.why-badge.active-tab {
    background: #2e7d32;
    color: #fff;
}


.why-empty-text {
    text-align: center;
    width: 100%;
    color: #cfcfcf;
    font-size: 0.95rem;
    margin-top: 15px;
}

/* ===== Feature Cards Grid ===== */
.features-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    width: 100%;
    margin-bottom: 40px;
}

.features-row.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* ===== Feature Card ===== */
.feature-card {
  flex: 1 1 calc(25% - 25px); /* 4 cards per row on large screens */
  background: #1b1e1c;
  border-radius: 14px;
  padding: 28px 20px;
  min-height: 320px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Icon */
.feature-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 15px;
}

/* Title */
.feature-title {
    font-size: 20px;
    
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.4;
}

.feature-title h1 {
  font-size: 20px;
  
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.4;
}



/* Description */
.feature-desc {
  font-size: 1rem;
  color: #cfcfcf;
  line-height: 1.6;
  word-wrap: break-word;
}

/* ===== Responsive ===== */

/* Tablet (≤992px) */
@media (max-width: 992px) {
  .feature-card {
    flex: 1 1 calc(45% - 25px); /* 2 cards per row */
    min-height: 280px;
    text-align: center;
  }

  .feature-desc {
    font-size: 0.95rem;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .features-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .feature-card {
    width: 90%;
    min-height: auto;
    text-align: center;
  }

  

  .services-carousel {
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 0 10px;
  }
  .services-wrapper {
    min-height: 260px !important;
    position: relative;
  }
  .service-card {
    position: relative !important;
    display: none !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
  }
  .service-card.active {
    display: flex !important;
  }
}

/* Small Phones (≤480px) */
@media (max-width: 480px) {
  .feature-card {
    width: 100%;
    padding: 22px 16px;
  }
}




    /* ======= Trusted Transport Section ======= */
.trusted-transport {
  position: relative;
  width: 100%;
  overflow: hidden;
  
}

.trusted-transport .trusted-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* ======= Text Container ======= */
.trusted-transport .trusted-content {
  position: absolute;
  bottom: 60px;
  left: 80px;
  color: #fff;
  z-index: 3;
  max-width: 650px;
}

/* ======= Heading ======= */


/* ======= Paragraph ======= */
.trusted-transport .trusted-content p {
  font-size: 20px;
  font-weight: 400;
  
  color: #ddd;
  line-height: 1.8;
  margin-bottom: 25px;
}


@media (max-width: 1280px) {
    .trusted-transport .trusted-content p {
        font-size: 19px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .trusted-transport .trusted-content p {
        font-size: 18px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .trusted-transport .trusted-content p {
        font-size: 17px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .trusted-transport .trusted-content p {
        font-size: 16px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .trusted-transport .trusted-content p {
        font-size: 15px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .trusted-transport .trusted-content p {
        font-size: 14px;
    }
}

/* ======= Button ======= */
.trusted-transport .trusted-content button {
  background-color: transparent;
  color: #fff;
  border: 1px solid #2e7d32;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  
  transition: all 0.3s ease;
}

.trusted-transport .trusted-content button:hover {
  background-color: #2e7d32;
  color: #fff;
}

/* ======= Responsive Styles ======= */

/* Tablet (≤992px) */
@media (max-width: 992px) {
  .trusted-transport .trusted-content {
    bottom: 40px;
    left: 50px;
    max-width: 500px;
  }

  .trusted-transport .trusted-content button {
    font-size: 18px;
    padding: 10px 28px;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .trusted-transport .trusted-content {
    position: relative;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 40px 20px;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
  }

  .trusted-transport .trusted-content button {
    font-size: 16px;
    padding: 10px 24px;
  }
}

/* Small Phones (≤480px) */
@media (max-width: 480px) {
  .trusted-transport .trusted-content {
    padding: 30px 15px;
  }

  .trusted-transport .trusted-content button {
    font-size: 15px;
    padding: 8px 20px;
  }
}



     /* SERVICES WE OFFER SECTION */
    .services-section {
      /* background: #232323;
      padding: 60px 0 40px 0; */
      display: flex;
      flex-direction: column;
      align-items: center;


      position:relative; background:#111; color:#fff; text-align:center; padding:100px 20px 120px 20px; z-index:1; 
    }

.services-section h1 {
    text-align: center !important;
    width: 100%;
    font-size: 60px !important;
    font-weight: bold;
    margin-bottom: 25px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .services-section h1 {
        font-size: 52px !important;
        font-weight: bold;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .services-section h1 {
        font-size: 35px !important;
        font-weight: bold;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .services-section h1 {
        font-size: 30px !important;
        font-weight: bold;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .services-section h1 {
        font-size: 25px !important;
        font-weight: bold;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .services-section h1 {
        font-size: 23px !important;
        font-weight: bold;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .services-section h1 {
        font-size: 14px !important;
        font-weight: bold;
    }
}


    .services-carousel {
      position: relative;
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      min-height: 400px;
      padding: 0 20px;
    }

    .service-card {
      background: transparent;
      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .service-card.active {
      display: flex;
      position: relative;
    }

    .carousel-arrow {
      position: absolute;
      bottom: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.3s ease;
    }

    .carousel-arrow-left {
      left: 0;
      background: #56605f;
    }

    .carousel-arrow-right {
      right: 0;
      background: #2f7d32;
    }

    .carousel-arrow:hover {
      transform: scale(1.1);
    }

    .service-info {
      /* flex: 1;
      color: #fff;
      padding-right: 40px; */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .service-info h3 {
      margin: 0 0 20px 0;
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .service-info p {
      font-size: 20px;
      /* color: #d6d6d6; */
      margin: 0;
      line-height: 1.6;
      max-width: 400px;
      
    }

    .service-img-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .service-img {
      width:100%;max-width:480px;height:auto;border-radius:12px; object-fit: cover;
    }

    .carousel-dots {
      display: flex;
      gap: 7px;
      justify-content: center;
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .dot {
      display: block;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #56605f;
    }

    .dot.active {
      background: #2f7d32;
      border: 2px solid #fff;
    }





    /* ======= SERVICES SECTION (RESPONSIVE) ======= */

/* Base styles (keep your original styles as-is) */

/* ----- Tablet breakpoint ----- */
@media (max-width: 992px) {
  .services-section {
    padding: 80px 15px;
  }

  .services-section h2 {
    font-size: 42px;
    margin-bottom: 40px;
  }

  .services-carousel {
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 0 10px;
  }
  .services-wrapper {
    min-height: 260px !important;
    position: relative;
  }
  .service-card {
    position: relative !important;
    display: none !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    height: auto !important;
  }
  .service-card.active {
    display: flex !important;
  }
}

/* ----- Mobile breakpoint ----- */
@media (max-width: 768px) {
  .services-section {
    padding: 70px 10px;
  }

  .services-section h2 {
    font-size: 34px;
    margin-bottom: 30px;
  }

 

  .service-card p {
    font-size: 16px !important;
  }

  .service-img {
    max-width: 320px !important;
    border-radius: 10px;
  }

  .carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .carousel-dots {
    margin-top: 20px;
  }

  .dot {
    width: 10px;
    height: 10px;
  }
}

/* ----- Extra Small Screens (Phones <480px) ----- */
@media (max-width: 480px) {
  .services-section {
    padding: 60px 10px;
  }

  .services-section h2 {
    font-size: 28px;
  }

 

  .service-card p {
    font-size: 14px !important;
  }

  .service-img {
    max-width: 260px !important;
  }

  .carousel-arrow {
    width: 35px;
    height: 35px;
  }

  .carousel-arrow-left {
    left: 5px;
  }

  .carousel-arrow-right {
    right: 5px;
  }

  .carousel-dots {
    margin-top: 18px;
  }

  .dot {
    width: 8px;
    height: 8px;
  }
}


/* ======= HERO SECTION ======= */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #1d1d1d;
  overflow: hidden;
}


.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('{{ asset('assets/img/hero banner image.png') }}') center top/cover no-repeat;
  z-index: 0;
}



/* ======= WELCOME CARD ======= */
.welcome-card {
  position: relative;
  background: #fff;
  color: #232323;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  padding: 40px 35px;
  width: 40%;
  
  z-index: 2;
  margin-left: 8%;
  margin-top: 150px; /* ✅ adds safe gap below logo */
  transition: all 0.3s ease;
}

/* ======= TEXT STYLING ======= */
.welcome-card h2 {
  
  font-weight: 800;
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 20px;
  line-height: 1.2;
}
.welcome-card h2 span {
  color: #2f7d32;
}
.welcome-card p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.welcome-card .ceo-intro {
  font-weight: 600;
  font-size: 20px;
  margin-top: 15px;
}

/* ======= BUTTONS ======= */
.btn-group {
  margin-top: 25px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.welcome-card a,
.welcome-card button {
  
  font-size: 16px;
  border-radius: 25px;
  padding: 10px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s ease;
}
.welcome-card a {
  background: #2f7d32;
  color: #fff;
  border: none;
}
.welcome-card a:hover {
  background: #256828;
}
.welcome-card button {
  background: #fff;
  color: #2f7d32;
  border: 1.5px solid #2f7d32;
}
.welcome-card button:hover {
  background: #2f7d32;
  color: #fff;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 1200px) {
  .welcome-card {
    width: 55%;
    margin-left: 6%;
    margin-top: 130px;
  }
}

@media (max-width: 992px) {
  .welcome-card {
    width: 70%;
    margin: 130px auto 0 auto;
    padding: 35px 28px;
    margin-top: 110px !important;

  }
  .welcome-card h2 {
    font-size: 26px;
    text-align: center;
  }
  .welcome-card p,
  .welcome-card .ceo-intro {
    font-size: 18px;
    text-align: center;
  }
  .btn-group {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .welcome-card {
    width: 85%;
    margin: 140px auto 0 auto;
    padding: 30px 24px;
    margin-top: 135px !important;
  }
  .welcome-card h2 {
    font-size: 22px;
  }
  .welcome-card p,
  .welcome-card .ceo-intro {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .welcome-card {
    width: 90%;
    margin-top: 130px;
    padding: 25px 20px;
  }
  .welcome-card h2 {
    font-size: 20px;
  }
  .welcome-card p,
  .welcome-card .ceo-intro {
    font-size: 14px;
  }
}
    

 

.features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns on large screens */
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  margin-top: 30px;
}

/* Each card */
.feature-card {
  background: #232625; /* ✅ same as before */
  border: 1.2px solid #214b23;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: #d0e1ce;
  transition: all 0.3s ease;
  height: 100%;
  min-height: 270px; /* keeps uniform height */
  position: relative;
  padding-top: 0px !important;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: #43d084;
  box-shadow: 0 8px 28px rgba(67, 208, 132, 0.12);
}

/* Icon */
.feature-icon {
  margin-bottom: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}



/* Description */
.feature-desc {
  
  font-size: 0.98rem;
  line-height: 1.6;
  color: #cccccc;
  flex-grow: 1; /* keeps text evenly spaced */
}

/* Equal height fix */
.features-row .feature-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.features-row.hidden {
    display: none !important;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .features-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .features-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .features-row {
    grid-template-columns: 1fr;
  }
  .feature-card {
    min-height: 240px;
    padding: 24px 18px;
  }
}


.special-transport-section {
  background-color: #000;
  width: 100%;
  padding: 100px 0;
  color: #fff;
  
}

/* remove centering restriction */
.special-transport-section .container {
  width: 65%;
  max-width: none;
  margin: 0;
  padding: 0 80px; /* spacing from edges */
}

/* Title & Subtitle */
.section-title {
  
font-weight: 700;
font-style: normal;
font-size: 54px;
line-height: 61px;
letter-spacing: -2px;
text-align: center;
text-transform: uppercase;

}

.section-subtitle {
  
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #cfcfcf;
  text-align: center;
  margin-bottom: 60px;
}

/* Cards Layout */
.transport-cards {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}

.transport-card {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 30px;
  flex: 1 1 48%; /* take almost half width each */
  min-width: 380px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.transport-card:hover {
  transform: translateY(-5px);
}

/* Badge */
.badge {
  /* display: inline-block;
  background-color: #2e7d32;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: 14px; */

  
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 29px;
letter-spacing: 0px;
/* background-color: #2e7d32;
 */
background: #2F7D324D;

  border-radius: 20px;
color: #EEEEEE;
padding: 4px 10px;

}

/* Card Text */
.card-title {
  /* font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px; */



  
font-weight: 700;
font-style: normal;
font-size: 20px;
line-height: 20px;
letter-spacing: 0px;
margin-top: 10px;

}

.card-desc {
  /* font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 20px; */


  
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 29px;
letter-spacing: 0px;
color: background: #EEEEEE99;


}

/* Button */
.card-btn {
  display: inline-block;
  background-color: #2F7D32;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  border-radius: 30px;
  padding: 12px 28px;
  text-decoration: none;
  transition: 0.3s ease;
  text-align: center;




}

.card-btn:hover {
  background-color: #2e7d32;
}

/* Responsive */
@media (max-width: 1024px) {
  .special-transport-section .container {
    padding: 0 40px;
  }

  .transport-cards {
    flex-direction: column;
    align-items: center;
  }

  .transport-card {
    width: 100%;
    max-width: 600px;
  }
}






   /* ===== Section 4 (Overlay + Responsive) ===== */
.section4-vertical {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.section4-card-vertical {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* Background image */
.section4-card-vertical img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Overlay gradient for text contrast */
.section4-card-vertical::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0.0) 100%
  );
  z-index: 2;
}

/* Content overlay */
.section4-content {
  position: absolute;             /* changed from relative */
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: 80px 60px;
  color: #fff;
  max-width: 60%;
}



.section4-content p {
  
  font-size: 20px;
  /* max-width: 90%; */

  font-weight: 400; color:#ddd; line-height:1.8; margin-bottom:25px;
}

.section4-btn {
  background-color: transparent;
  color: #fff;
  border: 1px solid #2e7d32;
  padding: 12px 32px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  
  transition: all 0.3s ease;
  
}

.section4-btn:hover {
  background-color: #2e7d32;
  color: #fff;
}

/* ===== Responsive Breakpoints ===== */

/* Tablet (≤992px) */
@media (max-width: 992px) {
  .section4-content {
    padding: 60px 35px;
    max-width: 600px;
  }

  .section4-btn {
    font-size: 17px;
    padding: 10px 28px;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  .section4-card-vertical {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section4-content {
    position: relative;
    text-align: center;
    align-items: center;
    padding: 40px 20px;
    max-width: 90%;
    border-radius: 12px;
  }

  .section4-card-vertical::before {
    background: rgba(0, 0, 0, 0.55);
  }

  .section4-btn {
    font-size: 16px;
    padding: 10px 24px;
  }
}

/* Small Phones (≤480px) */
@media (max-width: 480px) {
  .section4-content {
    padding: 30px 15px;
  }

  .section4-btn {
    font-size: 14px;
    padding: 8px 20px;
  }
}


    /* HERO SECTION */


    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 1;
      /* filter: brightness(2) !important; */
    }

    

    .logo-section {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    

    .logo {
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 1px;
    }

    .logo span {
      color: #2e7d32;
    }

    .tagline {
      font-size: 0.9rem;
      color: #fff;
      font-weight: 400;
    }

    

    .location-selector {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      cursor: pointer;
      padding: 8px 12px;
      border: 1px solid #333;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .location-selector:hover {
      border-color: #2e7d32;
    }

    .location-selector span {
      font-size: 0.9rem;
    }

    .location-icon {
      font-size: 16px;
    }

    .dropdown-icon {
      font-size: 12px;
      color: #888;
    }

    .language-selector {
      width: 40px;
      height: 40px;
      background: #333;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .language-selector:hover {
      background: #2e7d32;
    }

    .globe-icon {
      font-size: 20px;
      color: #ccc;
    }

    .profile-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 15px;
    }

    .profile-img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #eee;
      margin-top: 8px;
    }

    .welcome-title {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
      gap: 3px;
    }

    .welcome-green {
      color: #2e7d32;
      font-size: 1.3rem;
      font-weight: 700;
    }

    .welcome-black {
      color: #232323;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .welcome-desc {
      color: #333;
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 12px;
      position: relative;
      padding-left: 12px;
    }

    .welcome-desc::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #2e7d32;
    }

    .welcome-footer {
      font-weight: 700;
      margin-top: 5px;
      color: #333;
      font-size: 0.95rem;
    }

    .cta-row {
      margin-top: 15px;
      display: flex;
      gap: 15px;
    }

    .cta-btn {
      padding: 12px 24px;
      border-radius: 8px;
      border: none;
      background: #2e7d32;
      color: #fff;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background 0.2s;
    }

    .cta-btn.secondary {
      background: transparent;
      color: #2e7d32;
      border: 1px solid #2e7d32;
    }

    /* BELOW HERO SECTION */
    
.below-section {
        width:100%; background:#1d1d1d; color:#fff; text-align:center;
        padding: 80px 20px 80px 20px; 
        z-index:2; position:relative;
        padding-left: 4px !important;
        padding-right: 4px !important;


      /* padding: 80px 0 40px 0; */
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 3;
      position: relative;
      color: #fff;
      }

      /* .below-section h1 {
        font-size:60px !important; font-weight:bold;  
        text-align: center !important;
        margin-bottom: 18px;
      } */


      /* Default — Large Screens (Desktops) */
.below-section h1 {
    font-size: 60px !important;
    font-weight: bold;
    text-align: center !important;
    margin-bottom: 18px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .below-section h1 {
        font-size: 52px !important;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .below-section h1 {
        font-size: 35px !important;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .below-section h1 {
        font-size: 30px !important;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .below-section h1 {
        font-size: 25px !important;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .below-section h1 {
        font-size: 23px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .below-section h1 {
        font-size: 16px !important;
    }
}

    /* .below-section p {
      text-align: center;
      margin: 0 auto;
      font-weight: 400;
      max-width:900px; color:#ccc; line-height:1.7; font-size:20px;
    } */

    /* Default — Large Screens (Desktops) */
.below-section p {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 20px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .below-section p {
        font-size: 14px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .below-section p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .below-section p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .below-section p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .below-section p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .below-section p {
        font-size: 14px;
        max-width: 360px;
    }
}


   

    /* TRUSTED TRANSPORT & WHY CHOOSE US SECTION */
    .booking-hero-section {
      width: 100%;
      min-height: 70vh;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      overflow: hidden;
    }

    .booking-bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .booking-hero-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg,
          rgba(0, 0, 0, 0.1) 0%,
          rgba(0, 0, 0, 0.3) 50%,
          rgba(0, 0, 0, 0.6) 100%);
      z-index: 2;
    }

    .booking-hero-content {
      position: relative;
      z-index: 3;
      width: 100%;
      padding: 40px 5vw 60px 5vw;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #fff;
      text-align: left;
      margin-left: 0;
    }

    .booking-hero-content h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin: 0 0 15px 0;
      letter-spacing: 1px;
      line-height: 1.1;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .booking-hero-content p {
      font-size: 1rem;
      margin-bottom: 25px;
      line-height: 1.4;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .hero-btn {
      padding: 13px 38px;
      border-radius: 7px;
      border: none;
      background: #2e7d32;
      color: #fff;
      font-weight: 700;
      font-size: 1.08rem;
      cursor: pointer;
      box-shadow: 0 3px 16px rgba(54, 204, 132, 0.13);
      transition: background 0.22s;
    }

    .hero-btn:hover {
      background: #328452;
    }

   

    

   

   

   

    


    

    @media (max-width: 1040px) {

      .hero-section,
      .booking-hero-content
       {
        max-width: 98vw;
        padding-left: 3vw;
        padding-right: 3vw;
        margin: 0 4%;
      }
    }

    @media (max-width: 900px) {
     

     

      .logo {
        font-size: 1.5rem;
      }

      .tagline {
        font-size: 0.8rem;
      }

      
    }

    @media (max-width: 750px) {
      .welcome-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .cta-row {
        flex-direction: column;
        gap: 10px;
      }

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

      .carousel-arrow {
        width: 40px;
        height: 40px;
        bottom: 10px;
      }

      .carousel-arrow-left {
        left: 10px;
      }

      .carousel-arrow-right {
        right: 10px;
      }

      .service-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
      }

      .service-info {
        padding-right: 0;
        text-align: center;
      }

      .service-info h3 {
        font-size: 1.8rem;
      }

      .service-info p {
        font-size: 1rem;
      }

      .service-img-wrap {
        align-items: center;
      }

      .service-img {
        height: 200px;
      }

     

      .booking-hero-content {
        padding: 40px 3vw 30px 3vw;
      }

      .booking-hero-content h1 {
        font-size: 2rem;
      }

      .booking-hero-content p {
        font-size: 1rem;
      }

      .hero-btn {
        padding: 12px 25px;
        font-size: 1rem;
      }

    

      

      

      .faq-content {
        flex-direction: column;
        gap: 30px;
      }

      .faq-categories {
        flex: none;
        width: 100%;
      }

      

      .faq-container h3 {
        font-size: 1.2rem;
      }
    }

    @media (max-width: 600px) {
     

      .logo-section,
       {
        width: 100%;
        justify-content: flex-start;
      }

      .profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .welcome-title {
        font-size: 1rem;
      }

      .welcome-green,
      .welcome-black {
        font-size: 1.1rem;
      }

      .cta-row {
        flex-direction: column;
        gap: 8px;
        width: 100%;
      }

      .cta-btn {
        width: 100%;
        font-size: 1rem;
      }

      

      

      


     

      .booking-hero-content {
        padding: 40px 3vw 30px 3vw;
      }

      .booking-hero-content h1 {
        font-size: 2rem;
      }

      .booking-hero-content p {
        font-size: 1rem;
      }

      .hero-btn {
        padding: 12px 25px;
        font-size: 1rem;
      }


      

      

      .faq-content {
        flex-direction: column;
        gap: 30px;
      }

      .faq-categories {
        flex: none;
        width: 100%;
      }

      

      .faq-container h3 {
        font-size: 1.2rem;
      }
    }

    /* --- Extra Responsive Fixes for 710px and below --- */
    @media (max-width: 750px) {
      .hero-section {
        overflow: visible !important;
      }

     

      .hero-section,
      .welcome-card {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box;
      }

      .hero-section {
        padding: 0 !important;
        min-height: 320px !important;
        background-size: cover !important;
        background-position: center !important;
      }

      .welcome-card {
        margin: 18px 4px 0 4px !important;
        padding: 18px 8px !important;
        width: 98vw !important;
        max-width: 98vw !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
      }

      .welcome-card {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
        margin-top: 60px !important;
      }

      .welcome-card .welcome-title,
      .welcome-title {
        font-size: 1.1rem !important;
        text-align: left !important;
      }

      .welcome-card .welcome-green,
      .welcome-green {
        font-size: 1.1rem !important;
      }

      .welcome-card .welcome-black,
      .welcome-black {
        font-size: 1.1rem !important;
      }

      .welcome-card .welcome-btns,
      .cta-row {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: stretch !important;
      }

      .welcome-card .cta-btn,
      .cta-btn {
        width: 100% !important;
        font-size: 1rem !important;
        margin-bottom: 0 !important;
      }

      

      

     
    }

    

  

    /* Why Choose Us: 2 feature cards per row on mobile */
    

  

    .category-item {
      padding: 20px;
      /* border-radius: 25px; */
      /* background: #333; */
      cursor: pointer;
      transition: background 0.3s;
    }

    .category-item.active {
      background: #2a2a2a;
    }

    .question-item {
      border-bottom: 1px solid #333;
      margin-bottom: 10px;
    }

    .question-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 15px 10px;
      font-weight: 500;
    }


    .question-header span {
      font-weight: 400; font-style: normal; font-size: 24px; line-height: 140%; letter-spacing: -0.01em;
    }

    .question-answer {
      display: none;
      padding: 0 10px 15px 10px;
      color: #ccc;
      font-size: 24px;
    }

    .question-item.active .question-answer {
      display: block;
      font-size: 15px;
    }

    .arrow {
      transition: transform 0.3s ease;
    }

    .question-item.active .arrow {
      transform: rotate(180deg);
    }

  /* Base Modal Hidden */
  .newsletter-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  /* Dark Overlay */
  .newsletter-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* Modal Box */
  .newsletter-box {
    position: relative;
    background: #161917;
    color: #fff;
    padding: 35px 30px;
    border-radius: 18px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0,0,0,0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
  }

  /* Visible State */
  .newsletter-modal.show .newsletter-overlay {
    opacity: 1;
  }
  .newsletter-modal.show .newsletter-box {
    transform: scale(1);
    opacity: 1;
  }

  .newsletter-close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 22px;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s;
  }
  .newsletter-close:hover {
    color: #fff;
  }

  .newsletter-title {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 8px;
  }
  .newsletter-subtitle {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 20px;
  }

  #newsletterForm input {
    width:  100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #333;
    background: #0e0f10;
    color: #fff;
    font-size: 15px;
    margin-bottom: 18px;
    outline: none;
    transition: all 0.2s;
  }

  #newsletterForm input:focus {
    border-color: #2f7d32;
  }

  #subscribeBtn {
    background: #2f7d32;
    border: none;
    padding: 12px 30px;
    color: #fff;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }
.subscribeBtn:hover {
    background: #3da844;
  }

  /* Affiliates ke liye specific - 300x200 size */
#affiliatesWrapper .blog-card {
  flex: 0 0 300px;
  min-width: 300px;
  max-width: 300px;


  height: auto;
}

#affiliatesWrapper .blog-img {
  width  object-fit: cover;
  display: block;
}

#affiliatesWrapper .blog-content {
  padding: 18px 16px;
  background: linear-gradient(135deg, #1a1a1a 0%, #1f1f1f 100%);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#affiliatesWrapper {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-align: left;
}

#affiliatesWrapper .blog-content p {
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.5;
  margin-bottom: 10px;
  flex-grow: 1;
}

#affiliatesWrapper .blog-btn {
  color: #2e7d32;
  font-weight: 600;
  font-size: 13px;
  transition: color 0.3s ease;
  margin-top: auto;
}

#affiliatesWrapper .blog-btn:hover {
  color: #2f7d32;
}

#affiliatesWrapper .blog-card:hover {
 

 
 

  box-shadow: 0 10px 30px rgba(67, 208, 132, 0.12);
  border: none; /* removed the green border on hover */
  transform: translateY(-4px);
}

/* Force no border from any other rule */
#affiliatesWrapper .blog-card {
  border: none !important;
}


/* Default — Large Screens (Desktops) */
.service-card h3 {
    font-weight: bold;
    font-size: 40px;
    margin-bottom: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .service-card h3 {
        font-size: 36px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .service-card h3 {
        font-size: 32px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .service-card h3 {
        font-size: 28px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .service-card h3 {
        font-size: 24px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .service-card h3 {
        font-size: 22px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .service-card h3 {
        font-size: 14px;
    }
}


.service-card p{
  font-size:20px;line-height:1.6;color:#ddd;
}


.category-item p {
  font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: 0px;  
}

.category-item .active {
  font-weight: 600; font-size: 25px; line-height: 24px; letter-spacing: 0px;  
}


.blog-content h3 {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  line-height: 1.3;
  
  text-align: left;
}

.trusted-transport .trusted-content h1 {
    font-size: 60px;
    font-weight: bold;
    margin-bottom: 18px;
    line-height: 1.2;
}

/* Large screens (desktops) */
@media (max-width: 1280px) {
    .trusted-transport .trusted-content h1 {
        font-size: 52px;
        font-weight: bold;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .trusted-transport .trusted-content h1 {
        font-size: 35px !important;
        font-weight: bold;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 768px) {
    .trusted-transport .trusted-content h1 {
        font-size: 30px;
        font-weight: bold;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .trusted-transport .trusted-content h1 {
        font-size: 25px !important;
        font-weight: bold;
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 480px) {
    .trusted-transport .trusted-content h1 {
        font-size: 23px;
        font-weight: bold;
    }
}


/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .trusted-transport .trusted-content h1 {
        font-size: 16px !important;
        margin-top: 30%;
        font-weight: bold;
    }
}

.why-title {
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.2;
    font-size: 60px;
    font-weight: bold;
}

/* Large screens (desktops) */
@media (max-width: 1280px) {
    .why-title {
        font-size: 52px;
    }
}

/* Medium screens (tablets) */
@media (max-width: 1024px) {
    .why-title {
        font-size: 35px;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 768px) {
    .why-title {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .why-title {
        font-size: 25px;
    }
}


/* Extra small screens (mobile portrait) */
@media (max-width: 480px) {
    .why-title {
        font-size: 23px;
    }
}


@media (max-width: 480px) {
    .why-title {
        font-size: 16px;
    }
}



/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .why-sub p{
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .why-sub p{
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .why-sub p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .why-sub p{
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .why-sub p{
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .why-sub p {
        font-size: 14px;
        max-width: 360px;
    }
}

.provider-card-content-vertical h1 {
    
    font-weight: bold;
    font-size: 60px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
}

/* Large screens (desktops) */
@media (max-width: 1280px) {
    .provider-card-content-vertical h1 {
        font-size: 52px;
    }
}


/* Medium screens (tablets) */
@media (max-width: 1024px) {
    .provider-card-content-vertical h1 {
        font-size: 35px;
    }
}


/* Medium screens (tablets) */
@media (max-width: 768px) {
    .provider-card-content-vertical h1 {
        font-size: 30px;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 600px) {
    .provider-card-content-vertical h1 {
        font-size: 25px;
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 480px) {
    .provider-card-content-vertical h1 {
        font-size: 23px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .provider-card-content-vertical h1 {
        font-size: 16px;
    }
}


.section4-content h1 {
    
    font-weight: bold;
    font-size: 60px;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Large screens (desktops) */
@media (max-width: 1280px) {
    .section4-content h1 {
        font-size: 52px;
    }
}

/* Medium screens (tablets) */
@media (max-width: 1024px) {
    .section4-content h1 {
        font-size: 35px;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 768px) {
    .section4-content h1 {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .section4-content h1 {
        font-size: 25px;
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 480px) {
    .section4-content h1 {
        font-size: 23px;
    }
}

@media (max-width: 375px) {
    .section4-content h1 {
        font-size: 16px;
    }
}

.faq-container h1 {
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-align: center;
}

/* Large screens (desktops) */
@media (max-width: 1280px) {
    .faq-container h1 {
        font-size: 52px;
        text-align: center;
        font-weight: bold;
    }
}

/* Medium screens (tablets) */
@media (max-width: 1024px) {
    .faq-container h1 {
        font-size: 35px;
        text-align: center;
        font-weight: bold;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 768px) {
    .faq-container h1 {
        font-size: 30px;
        text-align: center;
        font-weight: bold;
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 600px) {
    .faq-container h1 {
        font-size: 25px;
        text-align: center;
        font-weight: bold;
    }
}

@media (max-width: 480px) {
    .faq-container h1 {
        font-size: 23px;
        text-align: center;
        font-weight: bold;
    }
}


@media (max-width: 375px) {
    .faq-container h1 {
        font-size: 16px;
        text-align: center;
        font-weight: bold;
    }
}


.blog-container h1 {
    font-size: 60px;
    display: flex;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    color: #2e7d32;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Large screens (desktops) */
@media (max-width: 1280px) {
    .blog-container h1 {
        font-size: 52px;
        font-weight: bold;
    }
}


@media (max-width: 1024px) {
    .blog-container h1 {
        font-size: 35px !important;
        font-weight: bold;
    }
}

/* Small screens (mobile landscape) */
@media (max-width: 768px) {
    .blog-container h1 {
        font-size: 30px;
        font-weight: bold;
    }
}


@media (max-width: 600px) {
    .blog-container h1 {
        font-size: 25px !important;
        font-weight: bold;
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 480px) {
    .blog-container h1 {
        font-size: 23px;
        font-weight: bold;
    }
}


@media (max-width: 375px) {
    .blog-container h1 {
        font-size: 16px !important;
        font-weight: bold;
    }
}





/* MAIN NAV STYLES */
/* MAIN NAV STYLES */
nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 22px 60px;
  display: flex;
  align-items: center;
  gap: 32px;
  background: transparent;
  z-index: 50;
}

/* LOGO */
nav .logo {
  flex-shrink: 0; /* logo ko squash mat hone do */
}

nav .logo img {
  max-width: 140px;
  width: 100%;
  height: auto;
  display: block;
}

/* NAV LINKS (center/right side) */
nav .nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;       /* logo se right side ko push */
  flex-wrap: nowrap;       /* bade screens pe wrap mat karo */
}

nav .nav-links li {
  list-style: none;
}

nav .nav-links a {
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;     /* text ko do line pe tootne se roke */
}

/* CTA BUTTON */
nav .nav-btn {
  margin-left: 24px;
  flex-shrink: 0;
}

nav .nav-btn .btn {
  padding: 10px 20px;
  background: #2e7d32;
  color: #000;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}


/* =============== BREAKPOINTS =============== */

/* 1200px se chhote screens: thoda gap / font kam */
@media (max-width: 1200px) {
  nav {
    padding: 20px 40px;
    gap: 24px;
  }

  nav .logo img {
    max-width: 130px;
  }

  nav .nav-links {
    gap: 18px;
  }

  nav .nav-links a {
    font-size: 14px;
  }

  nav .nav-btn .btn {
    padding: 9px 18px;
    font-size: 14px;
  }
}

/* 992px se chhote (tablet) – links ko compress + wrap allow */
@media (max-width: 992px) {
  nav {
    padding: 18px 24px;
    flex-wrap: wrap;                /* agar jagah kam ho to second row allow */
  }

  nav .logo {
    margin-bottom: 8px;
  }

  nav .nav-links {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 8px;
  }

  nav .nav-links a {
    font-size: 13px;
  }

  nav .nav-btn {
    margin-left: 12px;
  }

  nav .nav-btn .btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* 768px se chhote (mobile) – sab stack / center */
@media (max-width: 768px) {
  nav {
    position: absolute;        /* hero ke upar hi rahe */
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 10px;
  }

  nav .logo img {
    max-width: 110px;
  }

  nav .nav-links {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px 16px;
  }

  nav .nav-links a {
    font-size: 13px;
  }

  nav .nav-btn {
    margin-left: 0;
    margin-top: 4px;
  }

  nav .nav-btn .btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* 480px se chhote (chhote phones) */
@media (max-width: 480px) {
  nav {
    padding: 12px 12px;
  }

  nav .logo img {
    max-width: 95px;
  }

  nav .nav-links {
    gap: 8px 12px;
  }

  nav .nav-links a {
    font-size: 12px;
  }

  nav .nav-btn .btn {
    font-size: 12px;
    padding: 7px 14px;
  }
}




/* -------------------------------------------------- */
/* RESPONSIVE BREAKPOINTS */
/* -------------------------------------------------- */

/* Tablets */


/* --------------------------------------------- */
/* PREVENT CARD FROM OVERLAPPING THE NAV */
/* --------------------------------------------- */
header {
  padding-top: 130px;   /* adjust if needed */
}

@media (max-width: 768px) {
  header {
    padding-top: 100px;
  }
}

@media (max-width: 480px) {
  header {
    padding-top: 90px;
  }
}


.blog-container h3 {
  text-align: center !important;
}


/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .blog-container h3 {
        font-size: 36px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .blog-container h3 {
        font-size: 32px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .blog-container h3 {
        font-size: 28px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .blog-container h3 {
        font-size: 24px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .blog-container h3 {
        font-size: 22px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .blog-container h3 {
        font-size: 14px;
    }
}


/* ========== HERO BASE (DESKTOP DEFAULT) ========== */

.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* background image sabse neeche */
.hero-section .bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.5) !important;
}


.partner-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* dark overlay image ke upar */
.hero-bg {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 1;
}

/* actual text overlay ke upar */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 8%;
    color: #fff;
    margin-top: 5%;
    padding: 0 2rem;
}


.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2%;
}

/* common button base */
.hero-btn,
.request-ride,
.provider-register {
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    transition: all 0.3s ease;
}

/* link-based hero buttons */
.hero-btn-primary {
    background: #2e7d32;
    color: #fff;
}

.hero-btn-secondary {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

/* button classes (agar alag use karo) */
.request-ride {
    background-color: #2e7d32;
    color: #fff;
    border: 1px solid #2e7d32;
    padding: 12px 32px;
    border-radius: 30px;
    font-size: 20px;
}

/* Tablet */
@media screen and (max-width: 768px) {
    .request-ride {
        padding: 10px 26px;
        font-size: 16px;
    }
}

/* Mobile */
@media screen and (max-width: 480px) {
    .request-ride {
        padding: 9px 22px;
        font-size: 15px;
    }
}

/* Small Mobile – MUST BE LAST */
@media screen and (max-width: 375px) {
    .request-ride {
        padding: 8px 20px;
        font-size: 14px;
    }
}

.provider-register {
    background-color: transparent;
    color: #fff;
    border: 1px solid #2e7d32;
    padding: 12px 32px;
    border-radius: 30px;
    font-size: 20px;
}

/* ========== BREAKPOINTS ========== */



/* 992px se chhote (tablets landscape / medium screens) */
@media (max-width: 992px) {
    .hero-section {
        height: auto;
        min-height: 100vh;
    }

    .hero-content {
        margin-left: 0;
        margin-top: 0;
        align-items: center;
        text-align: center;
        padding: 0 1.5rem;
    }

    .hero-actions {
        justify-content: center;
        margin-top: 1.5rem;
    }
}



/* 768px se chhote (tablets portrait / normal mobiles) */
@media (max-width: 768px) {
    .hero-section {
        height: auto;
        min-height: 90vh;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 0.75rem;
    }

    .hero-actions .hero-btn,
    .provider-register {
        width: 100%;
        justify-content: center;
        font-size: 16px;
        padding: 10px 20px;
        border-radius: 30px;
    }

    .hero-content {
        padding: 0 1.25rem;
    }
}

/* 480px se chhote (small phones) */
@media (max-width: 480px) {
    .hero-content {
        padding: 0 1rem;
    }

    .hero-actions .hero-btn,
    .provider-register {
        font-size: 15px;
        padding: 9px 18px;
    }
}



/* ===== Recurring Tours / Special Transport ===== */

.rtm-section {
  background-color: #000;
  width: 100%;
  padding: 100px 0;
  color: #fff;
  
}

.rtm-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}


/* Cards layout */
.rtm-cards {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}

.rtm-card {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 30px 28px;
  flex: 1 1 calc(50% - 12px); /* 2 cards per row on large */
  min-width: 280px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rtm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Badge */
.rtm-badge {
  
  font-weight: 400;
  font-size: 12px;
  line-height: 29px;
  background: #2F7D324D;
  border-radius: 20px;
  color: #EEEEEE;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 10px;
}

/* Card text */
.rtm-card-title {
  
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.rtm-card-desc {
  
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 22px;
}

/* Button */
.rtm-card-btn {
  display: inline-block;
  background-color: #2F7D32;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  border-radius: 30px;
  padding: 12px 28px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.rtm-card-btn:hover {
  background-color: #2e7d32;
  transform: translateY(-1px);
}

/* ===== Responsive ===== */



/* <= 1024px (tablet landscape) */
@media (max-width: 1024px) {
  .rtm-container {
    padding: 0 30px;
  }

  .rtm-card-desc {
    font-size: 15px;
  }
}

/* <= 768px (tablet portrait / big phones) */
@media (max-width: 768px) {
  .rtm-section {
    padding: 80px 0;
  }

  .rtm-container {
    padding: 0 20px;
  }

  .rtm-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .rtm-card {
    flex: 1 1 100%;
    max-width: 600px;
    width: 100%;
  }

  .rtm-card-btn {
    width: 100%;
    text-align: center;
    font-size: 16px;
  }
}


@media (max-width: 600px) {
  .rtm-section {
    padding: 70px 0;
  }

  .rtm-container {
    padding: 0 18px;
  }

  .rtm-card {
    padding: 24px 18px;
    min-width: 0;
  }

  .rtm-card-desc {
    font-size: 14px;
  }

  .rtm-card-btn {
    font-size: 15px;
    padding: 10px 20px;
  }
}
/* <= 480px (small phones) */
@media (max-width: 480px) {
  .rtm-section {
    padding: 60px 0;
  }

  .rtm-container {
    padding: 0 14px;
  }

  .rtm-card {
    padding: 24px 18px;
    min-width: 0;
  }

  .rtm-card-desc {
    font-size: 14px;
  }

  .rtm-card-btn {
    font-size: 15px;
    padding: 10px 20px;
  }
}






.hero-section h1 {
    font-size: 60px !important;
    font-weight: bold;
    text-align: center !important;
    margin-bottom: 18px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .hero-section h1 {
        font-size: 52px !important;
        margin-top: 30%;
        font-weight: bold;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .hero-section h1 {
        font-size: 35px !important;
        margin-top: 35%;
        font-weight: bold;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 30px !important;
        margin-top: 18%;
        font-weight: bold;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .hero-section h1 {
        font-size: 25px !important;
        margin-top: 20%;
        font-weight: bold;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 23px !important;
        font-weight: bold;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .hero-section h1 {
        font-size: 16px !important;
        margin-top: 30%;
        font-weight: bold;
    }
}


.hero-subtitle, .hero-subtitle p, .hero-content p {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 22px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
   .hero-subtitle p, .hero-content p{
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .hero-subtitle p, .hero-content p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .hero-subtitle p, .hero-content p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .hero-subtitle p, .hero-content p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .hero-subtitle p, .hero-content p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .hero-subtitle p, .hero-content p {
        font-size: 14px;
        max-width: 360px;
    }
}

.rtm-title {
    font-size: 60px !important;
    font-weight: bold;
    text-align: center !important;
    
  line-height: 1.15;
  letter-spacing: -2px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .rtm-title, .rtm-title h1 {
        font-size: 52px !important;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .rtm-title, .rtm-title h1 {
        font-size: 35px !important;
        margin-top: 10%;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .rtm-title, .rtm-title h1 {
        font-size: 30px !important;
        margin-top: 10%;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
   .rtm-title, .rtm-title h1 {
        font-size: 25px !important;
        margin-top: 10%;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .rtm-title, .rtm-title h1 {
        font-size: 23px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .rtm-title, .rtm-title h1 {
        font-size: 16px !important;
        margin-top: 10%;
    }
}


.rtm-subtitle {
    margin: 0 auto;
    font-weight: 400;
     font-size: 22px;
    line-height: 1.7;
    color: #cfcfcf;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px auto;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .rtm-subtitle, .rtm-subtitle p {
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .rtm-subtitle, .rtm-subtitle p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .rtm-subtitle, .rtm-subtitle p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .rtm-subtitle, .rtm-subtitle p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .rtm-subtitle, .rtm-subtitle p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .rtm-subtitle, .rtm-subtitle p {
        font-size: 14px;
        max-width: 360px;
    }
}


.thankyou-hero-content h1 {
    font-size: 60px !important;
    font-weight: bold;
    text-align: center !important;
    margin-bottom: 18px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .thankyou-hero-content h1 {
        font-size: 52px !important;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .thankyou-hero-content h1 {
        font-size: 35px !important;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .thankyou-hero-content h1 {
        font-size: 30px !important;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .thankyou-hero-content h1 {
        font-size: 25px !important;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .thankyou-hero-content h1 {
        font-size: 23px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .thankyou-hero-content h1 {
        font-size: 16px !important;
    }
}

    /* Default — Large Screens (Desktops) */
.thankyou-hero-content p {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 22px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .thankyou-hero-content p {
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .thankyou-hero-content p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .thankyou-hero-content p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .thankyou-hero-content p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .thankyou-hero-content p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .thankyou-hero-content p {
        font-size: 14px;
        max-width: 360px;
    }
}


.partner-hero-title h1 {
    font-size: 60px !important;
    font-weight: bold;
    text-align: center !important;
    margin-bottom: 18px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .partner-hero-title h1 {
        font-size: 52px !important;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .partner-hero-title h1 {
        font-size: 44px !important;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .partner-hero-title h1 {
        font-size: 36px !important;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .partner-hero-title h1 {
        font-size: 32px !important;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .partner-hero-title h1 {
        font-size: 25px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .partner-hero-title h1 {
        font-size: 22px !important;
    }
}

    /* Default — Large Screens (Desktops) */
.partner-hero-subtitle p {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 20px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .partner-hero-subtitle p {
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .partner-hero-subtitle p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .partner-hero-subtitle p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .partner-hero-subtitle p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .partner-hero-subtitle p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .partner-hero-subtitle p {
        font-size: 14px;
        max-width: 360px;
    }
}

.cities-title {
    font-size: 60px !important;
    font-weight: bold;
    text-align: center !important;
    margin-bottom: 18px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .cities-title {
        font-size: 52px !important;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .cities-title {
        font-size: 35px !important;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .cities-title {
        font-size: 30px !important;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .cities-title {
        font-size: 25px !important;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .cities-title {
        font-size: 23px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .cities-title {
        font-size: 16px !important;
    }
}

    /* Default — Large Screens (Desktops) */
.cities-hero p {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 22px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .cities-hero p {
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .cities-hero p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .cities-hero p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .cities-hero p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .cities-hero p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .cities-hero p {
        font-size: 14px;
        max-width: 360px;
    }
}




.city-services-hero h1 {
    font-size: 60px !important;
    font-weight: bold;
    text-align: center !important;
    margin-bottom: 18px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .city-services-hero h1 {
        font-size: 52px !important;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .city-services-hero h1 {
        font-size: 35px !important;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .city-services-hero h1 {
        font-size: 30px !important;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .city-services-hero h1 {
        font-size: 25px !important;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .city-services-hero h1 {
        font-size: 23px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .city-services-hero h1 {
        font-size: 16px !important;
    }
}

    /* Default — Large Screens (Desktops) */
.city-services-hero p {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 22px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .city-services-hero p {
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .city-services-hero p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .city-services-hero p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .city-services-hero p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .city-services-hero p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .city-services-hero p {
        font-size: 14px;
        max-width: 360px;
    }
}


/* .form-group select {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
} */






#affiliatesWrapper .blog-desc p {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 14px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    #affiliatesWrapper .blog-desc p {
        font-size: 18px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    #affiliatesWrapper .blog-desc p {
        font-size: 18px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    #affiliatesWrapper .blog-desc p {
        font-size: 16px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    #affiliatesWrapper .blog-desc p {
        font-size: 15px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   #affiliatesWrapper .blog-desc p {
        font-size: 14px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    #affiliatesWrapper .blog-desc p {
        font-size: 12px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .feature-title {
        font-size: 16px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .feature-title {
        font-size: 14px !important;
        margin-top: 30%;
    }
}


.feature-desc {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    max-width: 900px;
    color: #ccc;
    line-height: 1.7;
    font-size: 17px;
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .feature-desc {
        font-size: 17px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .feature-desc {
        font-size: 16px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .feature-desc {
        font-size: 16px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .feature-desc {
        font-size: 15px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .feature-desc {
        font-size: 15px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .feature-desc {
        font-size: 14px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
    .rtm-card-title {
        font-size: 23px !important;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .rtm-card-title {
        font-size: 16px !important;
    }
}


/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .section4-content p {
        font-size: 19px;
        max-width: 800px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .section4-content p {
        font-size: 18px;
        max-width: 750px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .section4-content p {
        font-size: 17px;
        max-width: 600px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .section4-content p {
        font-size: 16px;
        max-width: 500px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .section4-content p {
        font-size: 15px;
        max-width: 420px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .section4-content p {
        font-size: 14px;
        max-width: 360px;
    }
}

/* Laptop (1280px and down) */
@media (max-width: 1280px) {
    .category-item p {
        font-size: 19px;
    }
}

/* Tablet Landscape (1024px and down) */
@media (max-width: 1024px) {
    .category-item p {
        font-size: 18px;
    }
}

/* Tablet Portrait (768px and down) */
@media (max-width: 768px) {
    .category-item p {
        font-size: 17px;
    }
}

/* Mobile Large (600px and down) */
@media (max-width: 600px) {
    .category-item p {
        font-size: 16px;
    }
}

/* Mobile Medium (480px and down) */
@media (max-width: 480px) {
   .category-item p {
        font-size: 15px;
    }
}

/* Mobile Small (375px and down) */
@media (max-width: 375px) {
    .category-item p {
        font-size: 14px;
    }
}