@media (max-width: 500px) {
    #subheader h1 {
        font-size: 34px;
    }
}



/* Default (Desktop) */
#subheader h2 {
    font-size: 48px;
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    #subheader h2 {
        font-size: 48px;
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    #subheader h2 {
        font-size: 48px;
    }
}

/* Small Mobile (≤425px optional fine-tune) */
@media (max-width: 500px) {
    #subheader h2 {
        font-size: 34px;
    }
}


/* ===================== */
/* TABLET (768px–1024px) */
/* ===================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* spacing */
  .contact-color {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* center content properly */
  .grid-divider .d-flex {
    justify-content: flex-start !important;
  }

  /* icon size adjust */
  .fs-60 {
    font-size: 45px;
  }

  /* text spacing */
  .grid-divider h4 {
    font-size: 18px;
  }

  .grid-divider p {
    font-size: 14px;
    text-align: left;
  }
}


/* ===================== */
/* MOBILE (<768px) */
/* ===================== */
@media (max-width: 767px) {

  /* show stacked layout */
  .grid-divider {
    display: block !important;
  }

  .contact-color {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* center each item */
  .grid-divider .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .grid-divider .ms-3 {
    margin-left: 0 !important;
    margin-top: 10px;
  }

  /* icon */
  .fs-60 {
    font-size: 40px;
  }

  /* spacing between items */
  .mb-sm-30 {
    margin-bottom: 20px;
  }

  .grid-divider h4 {
    font-size: 16px;
  }

  .grid-divider p {
    font-size: 14px;
  }
}


/* ===================== */
/* SMALL MOBILE (<480px) */
/* ===================== */
@media (max-width: 480px) {

  .fs-60 {
    font-size: 35px;
  }

  .grid-divider h4 {
    font-size: 15px;
  }

  .grid-divider p {
    font-size: 13px;
    text-align: center;
  }
}

/* MOBILE + TABLET */
@media (max-width: 1024px) {

  /* remove left border */
  .grid-divider > div {
    border-left: none !important;
  }

  /* add bottom border */
  .grid-divider > div {
    border-bottom: 1px solid rgba(255,255,255,0.2); /* adjust color if needed */
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  /* remove border from last item */
  .grid-divider > div:last-child {
    border-bottom: none;
  }
}
/* MOBILE + TABLET */
@media (max-width: 1024px) {

  /* remove any left border */
  .grid-divider > div,
  .grid-divider > div * {
    border-left: none !important;
  }

  /* 🔥 kill vertical divider (pseudo elements) */
  .grid-divider::before,
  .grid-divider::after,
  .grid-divider > div::before,
  .grid-divider > div::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
  }

  /* add bottom divider */
  .grid-divider > div {
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  /* remove last one */
  .grid-divider > div:last-child {
    border-bottom: none !important;
  }
}
/* ===================== */
/* TABLET (768px–1024px) */
/* ===================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 🔥 force show */
  .sm-hide {
    display: block !important;
    visibility: visible !important;
  }

}
/* ===================== */
/* TABLET (768px–1024px) */
/* ===================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* show section */
  .grid-divider.sm-hide {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: left;
  }

  /* default: 2 columns */
  .grid-divider > div {
    width: 50%;
    border-left: none !important;
  }

  /* center content inside */
  .grid-divider .d-flex {
    justify-content: center;
    text-align: left;
  }

  /* 🔥 last item full width + centered */
  .grid-divider > div:last-child {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* optional: control inner width so it doesn't stretch too much */
  .grid-divider > div:last-child .d-flex {
    max-width: 300px;
    width: 100%;
  }

  /* bottom borders */
  .grid-divider > div {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  /* remove last border */
  .grid-divider > div:last-child {
    border-bottom: none;
  }
}


/* ===================== */
/* TABLET (768px – 1024px) */
/* ===================== */
@media (min-width: 900px) and (max-width: 1024px) {
  #subheader .container {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* Target only this section */
@media (max-width: 768px) {

  section .col-lg-6:last-child .subtitle,
  section .col-lg-6:last-child h2 {
    text-align: center;
  }

}

/* ===================== */
/* 768px ONLY (all sides padding) */
/* ===================== */
@media (min-width: 768px) and (max-width: 991px) {
  #subheader .container {
    padding: 0px 50px 50px 50px; /* top right bottom left */
  }
}

/* ===================== */
/* MOBILE (<768px) */
/* ===================== */
@media (max-width: 767px) {
  #subheader .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ===================== */
/* SMALL MOBILE (<480px) */
/* ===================== */
@media (max-width: 480px) {
  #subheader .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}



.border-gray i {
    color: #1e8042;
}

/* ===== 1024px (small laptops / large tablets) ===== */
@media (max-width: 1024px) {
    .col-md-1-5 {
        width: 33.33%; /* 3 cards per row */
    }

    .border-gray h4 {
        font-size: 17px;
    }

    .border-gray {
        font-size: 14px;
    }

    .border-gray i {
        font-size: 24px;
        padding: 12px;
    }
}


/* ===== 768px (tablet) ===== */
@media (max-width: 768px) {
    .col-md-1-5 {
        width: 50%; /* 2 cards per row */
    }

    .border-gray {
        padding: 20px;
        font-size: 14px;
    }

    .border-gray h4 {
        font-size: 20px;
    }

    .border-gray i {
        font-size: 22px;
        padding: 10px;
    }

    .fs-24 {
        font-size: 18px !important;
        text-align: justify;
        padding: 0px !important;
    }
}


/* ===== 425px (large mobile) ===== */
@media (max-width: 425px) {
    .col-md-1-5 {
        width: 100%; /* 1 per row */
    }

    .border-gray {
        padding: 18px;
        font-size: 13px;
    }

    .border-gray h4 {
        font-size: 15px;
    }

    .border-gray i {
        font-size: 20px;
        padding: 9px;
    }

    .fs-24 {
        font-size: 16px !important;
        line-height: 1.5;
    }

    .ul-check li {
        font-size: 15px;
    }
}


/* ===== 320px (small mobile) ===== */
@media (max-width: 320px) {
    .border-gray {
        padding: 15px;
        font-size: 12px;
    }

    .border-gray h4 {
        font-size: 14px;
    }

    .border-gray i {
        font-size: 18px;
        padding: 8px;
    }

    .fs-24 {
        font-size: 15px !important;
    }

    .ul-check li {
        font-size: 15px;
    }
}


/* Default */
.project-section {
    padding: 80px 0;
}

/* 768px */
@media (max-width: 768px) {
    .project-section {
        padding: 60px 0;
    }
}

/* 425px */
@media (max-width: 425px) {
    .project-section {
        padding: 30px 15px;
    }
}

/* 320px */
@media (max-width: 320px) {
    .project-section {
        padding: 25px 10px;
    }
}


/* Mobile layout */
@media (max-width: 768px) {

    .col-md-1-5 {
        width: 50%;
    }

    /* Center the last (5th) card */
    .col-md-1-5:last-child {
        margin-left: auto;
        margin-right: auto;
    }

    /* Make last card full width but centered nicely */
    .col-md-1-5:nth-child(5) {
        width: 70%;
    }
}


/* Default */
.border-gray h4 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
}

/* 768px */
@media (max-width: 768px) {
    .border-gray h4 {
        font-size: 18px;
    }
}

/* 425px */
@media (max-width: 425px) {
    .border-gray h4 {
        font-size: 17px;
    }
}

/* 320px */
@media (max-width: 320px) {
    .border-gray h4 {
        font-size: 16px;
    }
}

/* Default (desktop) */
h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* 1024px */
@media (max-width: 1024px) {
    h3 {
        font-size: 20px;
    }
}

/* 768px */
@media (max-width: 768px) {
    h3 {
        font-size: 20px;
    }
}

/* 425px */
@media (max-width: 425px) {
    h3 {
        font-size: 20px;
    }
}

/* 320px */
@media (max-width: 320px) {
    h3 {
        font-size: 20px;
    }
  
}


/* Desktop */
.project-section {
    padding: 80px 0;
}

/* 1024px */
@media (max-width: 1024px) {
    .project-section {
        padding: 100px 15px;
    }
}

/* 768px */
@media (max-width: 768px) {
    .project-section {
        padding: 40px 15px;
    }
}

/* 425px */
@media (max-width: 425px) {
    .project-section {
        padding: 30px 15px;
    }
}

/* 320px */
@media (max-width: 320px) {
    .project-section {
        padding: 25px 10px;
    }
}

/* ===================== */
/* MOBILE SECTION SPACING REDUCTION */
/* ===================== */
@media (max-width: 768px) {
    section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 500px) {
    section {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}