html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.hero-section{
    background: linear-gradient(
        to right,
        #3F9AAE 0%,
        #4faab3 30%,
        #79C9C5 60%,
        rgba(121,201,197,0.2) 90%,
        rgba(121,201,197,0) 100%
    );
    padding: 60px 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-btn-primary{
    background:#79C9C5;
    border:none;
    color:#333;
    font-weight:600;
}

.hero-btn-primary:hover{
    background:#ffffff;
    color: #3F9AAE;
}

.hero-btn-outline{
    border:2px solid white;
    color:white;
}

.hero-btn-outline:hover{
    background:white;
    color:#3F9AAE;
}

.hero-subtitle{
    font-size: 24px;
    font-weight: 500;
    color: #f0f0f0;
}

.hero-desc{
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
    max-width: 520px;
    opacity: 0.95;
}

.about-section{
    background:#f8fbfb;
}

.about-title{
    font-size:36px;
    font-weight:700;
    color:#3F9AAE;
}

.about-desc{
    font-size:18px;
    line-height:1.7;
    color:#555;
    max-width:520px;
}

.about-list li{
    margin-bottom:10px;
    font-size:16px;
}

.about-list i{
    margin-right:8px;
    font-size:20px;
    color:#3F9AAE;
}

.about-image{
    max-width: 65%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.service-card{
    display:flex;
    gap:15px;
    align-items:center;
    background:white;
    border:1px solid #eee;
    transition:0.25s;
}

.service-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.service-icon{
    font-size:38px;
    color:#3F9AAE;
}

.service-short{
    font-size:14px;
    color:#6c757d;
    margin:0;
}

/* card đang mở */
    .accordion-button:not(.collapsed){
    background:#f0f8fa;
    border-left:4px solid #3F9AAE;
    box-shadow:none;
}

.accordion-button:focus{
    box-shadow:none;
}

.service-detail{
    background:#ffffff;
    border-left:4px solid #3F9AAE;
    padding:20px;
    border-radius:8px;
}

.service-feature{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
}

.service-feature i{
    color:#3F9AAE;
    background:#f0f8fa;
    padding:8px;
    border-radius:50%;
}

.why-section{
    background:#f8fbfb;
}

/* CARD */
.why-card{
    background:white;
    padding:30px 20px;
    border-radius:12px;
    transition:0.3s;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
    position:relative;
    height:100%;
}


/* icon */
    .why-icon{
    font-size:28px;
    color:white;
    background:#3F9AAE;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    margin:0 auto 15px;
}

/* text */
    .why-card h5{
    margin-bottom:10px;
}

.why-card p{
    font-size:14px;
    color:#6c757d;
}

.cta-section{
    background:linear-gradient(135deg,#3F9AAE,#79C9C5);
    color:white;
    border-radius:10px;
}

.cta-sub{
    opacity:0.9;
}

/* card */
.cta-card{
    background:rgba(255,255,255,0.12);
    padding:30px 25px;
    border-radius:12px;
    transition:0.3s;
    height:100%;
}

.cta-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,0.2);
}

/* icon */
.cta-icon{
    font-size:30px;
    margin-bottom:15px;
}

/* illustration */
.cta-truck{
    width:80px;
    opacity:0.9;
    animation: truckMove 6s linear infinite;
}

/* truck animation */
@keyframes truckMove{
    0%{ transform:translateX(-40px); }
    50%{ transform:translateX(40px); }
    100%{ transform:translateX(-40px); }
}