﻿.package-car-wrap{
    width: 100%;
    height: 864px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 100px 60px 100px;
    background: #ffff;
}

.package-car{
    max-width: 1240px;
    width: 100%;
}

.package-car .header-package{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-car .header-package .title{
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 36px;
    line-height: 125%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-align: left;
}

.package-car .header-package .separate-blue-th{
    width: 450px;
    height: 0px;
    border: 1px solid #00708D;
}

.package-car .header-package .separate-blue-en{
    width: 602px;
    height: 0px;
    border: 1px solid #00708D;
}

.package-car .header-package .btn{
    width: 115px;
    height: 50px;
    font-size: 20px;
    font-weight: 400;
    border-radius: 40px;
}

.package-car .each-pack{
    margin-top: 60px;
    display: flex;
    gap: 24px;
}

.package-car .each-pack .pack-wrap{
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    width: 398px;
    height: 634px;
    box-shadow:0px 4px 4px -4px rgba(12, 12, 13, 0.05),
  0px 16px 32px -4px rgba(12, 12, 13, 0.10);
}

.package-car .each-pack .pack-kinto{
    width: 100%;
    height: 101px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-style: solid;
    border-color: #ADE9F8;
    padding: 24px 8px 36px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 1px 1px 0px 1px;
    background: #ffff;
}

.package-car .each-pack .pack-kinto img{
    width: 212px;
    height: 58px;
    object-fit: contain;
}

.package-car .each-pack .car-card{
    background: linear-gradient(180deg, rgba(239, 90, 64, 0.8) 61.54%, rgba(255, 255, 255, 0.8) 74.52%);
    width: 100%;
    height: 547px;
    border-radius:16px;
    margin-top: -10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    padding-bottom: 32px;
    padding-top: 56px;
}
.package-car .each-pack .car-card.kintoone{
    background: linear-gradient(180deg, #5FBCDE 61.54%, #FFFFFF 74.52%);

}

.package-car .each-pack .car-card.kintolimite{
    background: linear-gradient(180deg, rgba(254, 210, 74, 0.8) 61.54%, #FFFFFF 74.52%);

}

.package-car .each-pack .car-card .HotDeal{
    width: 250px;
    /*height: 73.75px;*/
} 

.package-car .each-pack .car-card .text-heade-card{
    font-weight: 600;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #FFFFFF;
    text-align: center;
}
.package-car .each-pack .car-card .text-heade-card.blue{
    color: #00708D;
}

.package-car .each-pack .car-card .text-card{
font-weight: 400;
font-style: Regular;
font-size: 24px;
line-height: 150%;
letter-spacing: 0%;
text-align: center;
vertical-align: bottom;
color: #FFFFFF;
}

.package-car .each-pack .car-card .text-card.blue{
    color: #00708D;
}
.package-car .each-pack .car-card .btn-primary{
    width: 115px;
    height: 56px;
    border-radius: 40px;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: uppercase;
    text-align: left;
}

.package-car .each-pack .car-card .btn{
    width: 115px;
    height: 56px;
    border-radius: 40px;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
   /* text-transform: uppercase; */
    text-align: left;
}

.package-car .each-pack .car-card .btn:hover{
    background: #00708D;
    color: #ffff;
}

.package-car .pack-wrap:hover{
    transform: scale(1.1);
    transition: transform .2s;
}

/** Mobile" portrait **/
 @media screen and (orientation: portrait) and (max-width:515px){
     .package-car-wrap{
         padding: 25px 20px 20px 20px;
     }
     .package-car-wrap{
         height: auto;
     }
     .pack-car-mobile .pack-card .btn {
    width: 190px !important;
     }
 }

 .package-car-mobile{
display: flex;
flex-direction: column;
gap: 20px;
 }

  .package-car-mobile .title{
font-weight: 800;
font-style: ExtraBold;
font-size: 24px;
line-height: 125%;
letter-spacing: 0%;
vertical-align: middle;
  }

  .package-car-mobile .separate-blue{
          width: 100%;
    height: 0px;
    border: 1px solid #00708D;
  }

  .pack-car-mobile{
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-top: 24px;
  }

  .pack-car-mobile .pack-card{
    width: 100%;
    height: 209px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 16px 0px;
    box-shadow:0px 4px 4px -4px rgba(12, 12, 13, 0.05),0px 16px 32px -4px rgba(12, 12, 13, 0.10);
}

    .pack-car-mobile .pack-card.speedygo{
        background: linear-gradient(180deg, rgba(239, 90, 64, 0.8) 37.98%, rgba(255, 255, 255, 0.8) 74.52%);

    }

    .pack-car-mobile .pack-card.newcar{
        background: linear-gradient(180deg, rgba(95, 188, 222, 0.8) 48.56%, rgba(255, 255, 255, 0.8) 74.52%);
    }

    .pack-car-mobile .pack-card.used-car{
       background: linear-gradient(180deg, #FEDB6E 39.9%, #FFFFFF 74.52%);

    }

    .pack-car-mobile .pack-card.newcar .header-title{
font-weight: 600;
font-style: SemiBold;
font-size: 35px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color: #FFFFFF;

    }
 .pack-car-mobile .pack-card.newcar .text{
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: bottom;
}

.pack-car-mobile .pack-card.used-car .header-title{
    font-weight: 600;
font-style: SemiBold;
font-size: 35px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color: #00708D;
}

 .pack-car-mobile .pack-card.used-car .text{
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    color: #00708D;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: bottom;
}
    .pack-car-mobile .pack-card .car-img{
        width: 179px;
        height: 175px;
        object-fit: cover;
    }

    .pack-car-mobile .pack-card.speedygo .pack-img{
        width: 200px;
        /*height: 59px;*/
    }

    .pack-car-mobile .pack-card.speedygo .detail-wrap{
display: flex;
flex-direction: column;
gap: 11px;
    }

.pack-car-mobile .pack-card.speedygo .detail-wrap .text{
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0%;
    vertical-align: bottom;
    color: #ffff;
    text-align: center;
    margin-top: -15px;
}
    .pack-car-mobile .pack-card .btn{
    width: 190px;
    height: 56px;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    /* text-transform: uppercase; */
    text-align: center;
    border-radius: 40px;
    white-space: nowrap;
}

.pack-car-mobile .pack-card .detail{
    height: 177px;
} 

.pack-car-mobile .pack-card .btn:hover{
    background: #00708D;
    color: #ffff;
}