﻿    :root {
      --primary-blue: #1a4b8c;
      --primary-green: #2e8b57;
      --dark-bg: #0d1b2a;
    }
    .gap-3 {
        gap: 1rem!important
    }
    /* Hero Section */
    .agent-section {
      background:#004199;
      display: flex;
      align-items: center;
    }

    .agent-content {
      padding: 50px 0 50px 30px;
      color: #fff;
    }

    .agent-title {
      font-weight: 700;
    }
    .hr-white{
      width: 100px;
      background: #fff;
      height: 2px;
      opacity: 1;
      margin: 15px 0 20px;
    }
    .hr-green{
      width: 100px;
      background: #009b4c;
      height: 3px;
      opacity: 1;
      border-top: none;
      margin: 20px auto;
    }
    .agent-list {
      list-style: none;
      padding: 0;
      margin-bottom: 30px;
    }

    .agent-list li {
      padding: 10px 0;
      position: relative;
    }

    .btn-primary-custom {
      background: #fff;
      border: none;
      padding: 15px 30px;
      font-weight: 600;
      border-radius: 0;
      transition: all 0.3s;
    }

    .btn-primary-custom:hover {
      background: #3cb371;
      transform: translateY(-2px);
      box-shadow: 0 5px 20px rgba(46, 139, 87, 0.4);
    }

    .btn-outline-custom {
      background: transparent;
      border: 2px solid #fff;
      padding: 15px 30px;
      font-weight: 600;
      border-radius: 0;
      color: #fff;
      transition: all 0.3s;
    }

    .btn-outline-custom:hover {
      background: #fff;
      color: var(--primary-blue);
    }
    .color-green{color: #009b4c;}
    .bg-green{background: #009b4c;}
    .line-height{line-height: 2;}
    /* About Section */
    .about-agent-section {
      padding: 50px 0;
      background: #f8f9fa;
    }

    .section-agent-title {
      font-size: 2.2rem;
      font-weight: 700;
      color: #009b4c;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .section-agent-title::before, .section-agent-title::after {
      content: "";
      width: 70px;
      display: inline-block;
      height: 4px;
      margin: 0 20px;
      font-weight: bold;
      background: #009b4c;
    }
    .about-card {
      background: var(--primary-green);
      color: #fff;
      padding: 40px;
      height: 100%;
    }

    .about-card h3 {
      font-size: 1.5rem;
      margin-bottom: 20px;
    }

    /* Products Section */
    .products-card {
      border-radius: 15px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 40px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }
    .products-card h6 {
        font-size: 1rem;
        text-align: center;
        line-height: 1.4;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .products-card:hover {
      transform: translateY(-10px);
    }
    .products-card a:hover {
      text-decoration: underline;
    }

    /* Recruitment Section */
    .recruitment-section {
      padding: 50px 0;
      margin: 40px 0;
      background: url("../images/agent4.jpg")no-repeat center;
      color: #fff;
      background-size: cover;
    }

    .recruitment-content {
      display: flex;
      align-items: center;
      gap: 50px;
    }

    .recruitment-image {
      background: url('../images/agent3.jpg') center/cover;
      min-height: 300px;
      flex: 1;
      width: 100%;
    }
    .recruitment-section-title {
      font-size: 2.2rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .recruitment-section-title::before, .recruitment-section-title::after {
      content: "";
      width: 70px;
      display: inline-block;
      height: 4px;
      margin: 0 20px;
      font-weight: bold;
      background: #fff;
    }
    .recruitment-text {
      flex: 1;
    }

    .recruitment-text h2 {
      font-size: 2rem;
      margin-bottom: 30px;
    }

    /* Advantages Section */
    .advantages-section {
      padding: 20px 0 50px;
      background: #fff;
    }
    .advantages-box>div{width: 12%;}
    .advantage-card {
      text-align: center;
      height: 100%;
      transition: all 0.3s;
    }
    .advantage-card h5{
      font-size: 1rem;
    }
    .advantage-card:hover {
      transform: translateY(-5px);
    }

    .advantage-icon {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }

    /* Partner Section */
    .partner-section {
      padding: 20px 0;
    }
    .partner-box{background: #009b4c;padding: 50px;color: #fff;}
    .partner-box h4{line-height: 1.5;}

    .partner-requirements {
      background: url('../images/agent5.jpg') center/cover;
      min-height: 300px;
    }

    /* Terms Section */
    .terms-section {
      padding: 30px 0 50px;
      margin-top: 40px;
      background: #eeeeee;
    }

    .term-card {
      background: #fff;
      border: 2px dashed #009b4c;
      padding: 40px;
      text-align: center;
      height: 100%;
      transition: all 0.3s;
    }

    .term-card:hover {
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }


    /* Services Section */
    .services-section {
      padding: 50px 0;
      background:  url('../images/agent6.jpg') center/cover;
      color: #fff;
    }

    .service-card {
      text-align: center;
      height: 100%;
    }

    .service-icon {
      width: 100px;
      height: 100px;
      background: none;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
    }

    .contact-email {
      font-weight: 700;
    }
    .contact-email a{
      border: 1px solid #fff;
      padding: 5px 30px 10px;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .agent-title {
        font-size: 1.8rem;
      }

      .recruitment-content {
        flex-direction: column;
      }

      .section-agent-title,.recruitment-section-title {
        font-size: 1.5rem;
      }
      .section-agent-title::before, .section-agent-title::after{margin: 0 10px;}
      .advantages-box{flex-wrap: wrap;}
      .advantages-box>div{width: 30%;margin-bottom: 20px;}
    }

    @media (max-width: 768px) {
      .agent-content {
        padding: 30px 20px;
      }
      .section-agent-title,.recruitment-section-title {
        font-size: 1.2rem;
      }
      .products-card img{width: 100%;}
      .advantages-box>div{width: 45%;}
      .contact-email a {
        display: block;
        width: 100%;
        margin-bottom: 10px;
      }
    }