/* PROCESS SECTION */

/* ============ BRANCHES SECTION ============ */
    .aqua-branches {
      padding: 70px 0;
      background: linear-gradient(180deg, #f0f9ff 0%, #e6f4ff 100%);
      position: relative;
      overflow: hidden;
    }

    /* Map Background */
    .aqua-branches-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M400 50 L450 80 L480 60 L520 90 L500 120 L530 150 L510 180 L540 200 L520 230 L550 260 L530 290 L500 280 L480 310 L450 290 L420 320 L400 300 L380 330 L350 300 L320 330 L300 300 L270 320 L250 290 L220 310 L200 280 L230 250 L210 220 L240 190 L220 160 L250 130 L280 150 L310 120 L340 140 L370 110 L400 130 L400 50Z' fill='%2300B4D8' fill-opacity='0.03'/%3E%3Cpath d='M200 400 L250 420 L280 400 L320 430 L350 410 L380 440 L420 420 L450 450 L480 430 L510 460 L540 440 L520 480 L550 510 L520 540 L480 520 L450 550 L400 530 L350 550 L300 520 L270 550 L230 520 L200 540 L180 500 L210 470 L180 440 L200 400Z' fill='%230077B6' fill-opacity='0.03'/%3E%3Ccircle cx='150' cy='150' r='80' fill='%2390E0EF' fill-opacity='0.05'/%3E%3Ccircle cx='650' cy='450' r='100' fill='%2300B4D8' fill-opacity='0.04'/%3E%3Ccircle cx='700' cy='100' r='60' fill='%230077B6' fill-opacity='0.03'/%3E%3Ccircle cx='100' cy='500' r='70' fill='%2390E0EF' fill-opacity='0.04'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
      opacity: 0.8;
    }

    /* Thailand Map Outline */
    .aqua-branches-map {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 700px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cpath d='M200 20 C220 25 240 30 255 45 C270 60 280 80 285 100 C290 120 295 140 300 160 C310 180 325 195 340 210 C350 225 355 245 350 265 C345 285 335 300 320 315 C310 330 305 350 310 370 C315 390 325 405 330 425 C335 445 330 465 315 475 C300 485 280 480 265 470 C250 460 240 445 230 430 C220 415 205 405 190 400 C175 395 160 400 145 410 C130 420 120 435 115 455 C110 470 100 480 85 475 C70 470 65 450 70 430 C75 410 85 395 90 375 C95 355 90 335 80 320 C70 305 55 295 50 275 C45 255 50 235 60 220 C70 205 85 195 95 180 C105 165 110 145 115 125 C120 105 130 85 145 70 C160 55 180 45 200 20Z' fill='none' stroke='%2300B4D8' stroke-width='1' stroke-opacity='0.15' stroke-dasharray='5,5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      opacity: 0.5;
      pointer-events: none;
    }

    /* Floating Pin Markers */
    .aqua-branches::before {
      content: '';
      position: absolute;
      top: 15%;
      left: 20%;
      width: 20px;
      height: 20px;
      background: #00B4D8;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      opacity: 0.2;
      animation: aquaPinFloat 3s ease-in-out infinite;
    }

    .aqua-branches::after {
      content: '';
      position: absolute;
      bottom: 20%;
      right: 15%;
      width: 16px;
      height: 16px;
      background: #0077B6;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      opacity: 0.2;
      animation: aquaPinFloat 3s ease-in-out infinite 1s;
    }

    @keyframes aquaPinFloat {

      0%,
      100% {
        transform: rotate(-45deg) translateY(0);
      }

      50% {
        transform: rotate(-45deg) translateY(-10px);
      }
    }

    .aqua-branches-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
      position: relative;
      z-index: 1;
    }

    /* Section Header */
    .aqua-branches-header {
      text-align: center;
      margin-bottom: 45px;
    }

    .aqua-branches-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      box-shadow: 0 10px 30px rgba(0, 119, 182, 0.25);
      position: relative;
    }

    .aqua-branches-icon::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 24px;
      border: 2px dashed rgba(0, 180, 216, 0.3);
      animation: aquaRotate 20s linear infinite;
    }

    @keyframes aquaRotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .aqua-branches-icon i {
      font-size: 28px;
      color: #fff;
    }

    .aqua-branches-title {
      font-family: 'Kanit', sans-serif;
      font-size: 34px;
      font-weight: 700;
      color: #03045E;
      margin-bottom: 12px;
    }

    .aqua-branches-title span {
      background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .aqua-branches-subtitle {
      font-size: 16px;
      color: #666;
      max-width: 480px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* Branch Grid */
    .aqua-branches-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    /* Branch Card */
    .aqua-branch-card {
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 5px 25px rgba(0, 119, 182, 0.08);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      border: 1px solid rgba(0, 180, 216, 0.1);
    }

    .aqua-branch-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 50px rgba(0, 119, 182, 0.18);
      border-color: rgba(0, 180, 216, 0.3);
    }

    /* Card Image */
    .aqua-branch-img {
      position: relative;
      height: 150px;
      overflow: hidden;
    }

    .aqua-branch-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .aqua-branch-card:hover .aqua-branch-img img {
      transform: scale(1.1);
    }

    .aqua-branch-img::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(180deg, transparent 0%, rgba(3, 4, 94, 0.6) 100%);
    }



    /* Card Content */
    .aqua-branch-content {
      padding: 20px 18px;
    }

    .aqua-branch-name {
      font-family: 'Kanit', sans-serif;
      font-size: 17px;
      font-weight: 600;
      color: #03045E;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .aqua-branch-name i {
      color: #00B4D8;
      font-size: 16px;
    }

    .aqua-branch-address {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: #777;
      line-height: 1.55;
      margin-bottom: 16px;
      min-height: 38px;
    }

    .aqua-branch-address i {
      color: #ef4444;
      font-size: 11px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    /* Machine Info - List Style */
    .aqua-branch-machines {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 16px;
      background: #f8fbff;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(0, 180, 216, 0.1);
    }

    .aqua-machine-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(0, 180, 216, 0.08);
    }

    .aqua-machine-row:last-child {
      border-bottom: none;
    }

    .aqua-machine-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .aqua-machine-left i {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .aqua-machine-left i.wash-icon {
      background: linear-gradient(135deg, #e0f7ff 0%, #b8ecff 100%);
      color: #0077B6;
    }

    .aqua-machine-left i.dry-icon {
      background: linear-gradient(135deg, #fff8e6 0%, #ffecb3 100%);
      color: #f59e0b;
    }

    .aqua-machine-left i.time-icon {
      background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
      color: #43a047;
    }

    .aqua-machine-left i.temp-icon {
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      color: #1976d2;
    }

    .aqua-machine-name {
      font-size: 13px;
      color: #555;
      font-weight: 500;
    }

    .aqua-machine-value {
      font-family: 'Kanit', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #03045E;
    }

    /* Card Button */
    .aqua-branch-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 12px 16px;
      background: linear-gradient(135deg, #03045E 0%, #0077B6 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .aqua-branch-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }

    .aqua-branch-btn:hover::before {
      left: 100%;
    }

    .aqua-branch-btn:hover {
      background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
      color: #fff;
      box-shadow: 0 5px 20px rgba(0, 119, 182, 0.3);
    }

    .aqua-branch-btn i {
      font-size: 12px;
    }

    /* View All Button */
    .aqua-branches-footer {
      text-align: center;
      margin-top: 45px;
    }

    .aqua-branches-viewall {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 40px;
      background: #fff;
      color: #0077B6;
      border: 2px solid #0077B6;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 119, 182, 0.1);
    }

    .aqua-branches-viewall:hover {
      background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 8px 30px rgba(0, 119, 182, 0.3);
      transform: translateY(-2px);
    }

    .aqua-branches-viewall i {
      font-size: 14px;
      transition: transform 0.3s ease;
    }

    .aqua-branches-viewall:hover i:last-child {
      transform: translateX(4px);
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1199px) {
      .aqua-branches-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
    }

    @media (max-width: 991px) {
      .aqua-branches {
        padding: 55px 0;
      }

      .aqua-branches-title {
        font-size: 30px;
      }

      .aqua-branches-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }

      .aqua-branches-map {
        width: 400px;
        height: 500px;
      }
    }

    @media (max-width: 767px) {
      .aqua-branches {
        padding: 45px 0;
      }

      .aqua-branches-header {
        margin-bottom: 35px;
      }

      .aqua-branches-icon {
        width: 60px;
        height: 60px;
        border-radius: 16px;
      }

      .aqua-branches-icon i {
        font-size: 24px;
      }

      .aqua-branches-title {
        font-size: 26px;
      }

      .aqua-branches-subtitle {
        font-size: 14px;
      }

      .aqua-branches-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .aqua-branch-img {
        height: 120px;
      }

      .aqua-branch-content {
        padding: 16px 14px;
      }

      .aqua-branch-name {
        font-size: 15px;
        gap: 6px;
      }

      .aqua-branch-name i {
        font-size: 14px;
      }

      .aqua-branch-address {
        font-size: 11px;
        margin-bottom: 12px;
        min-height: 34px;
      }

      .aqua-branch-machines {
        margin-bottom: 12px;
        border-radius: 10px;
      }

      .aqua-machine-row {
        padding: 10px 12px;
      }

      .aqua-machine-left i {
        width: 24px;
        height: 24px;
        font-size: 10px;
      }

      .aqua-machine-name {
        font-size: 12px;
      }

      .aqua-machine-value {
        font-size: 13px;
      }

      .aqua-branch-btn {
        padding: 10px 14px;
        font-size: 12px;
        border-radius: 10px;
      }

      .aqua-branch-number {
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: 8px;
      }

      .aqua-branch-status {
        padding: 5px 10px;
        font-size: 10px;
      }

      .aqua-branches-footer {
        margin-top: 35px;
      }

      .aqua-branches-viewall {
        padding: 14px 30px;
        font-size: 14px;
      }

      .aqua-branches-map {
        display: none;
      }
    }

    @media (max-width: 480px) {
      .aqua-branches {
        padding: 35px 0;
      }

      .aqua-branches-title {
        font-size: 24px;
      }

      .aqua-branches-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 360px;
        margin: 0 auto;
      }

      .aqua-branch-img {
        height: 150px;
      }

      .aqua-branch-content {
        padding: 18px 16px;
      }

      .aqua-branch-name {
        font-size: 16px;
      }

      .aqua-branch-address {
        font-size: 12px;
        min-height: auto;
      }

      .aqua-machine-row {
        padding: 12px 14px;
      }

      .aqua-machine-left i {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }

      .aqua-machine-name {
        font-size: 13px;
      }

      .aqua-machine-value {
        font-size: 14px;
      }

      .aqua-branch-btn {
        padding: 12px 16px;
        font-size: 13px;
      }

      .aqua-branches-viewall {
        width: 100%;
        max-width: 300px;
        justify-content: center;
      }
    }