@media(max-width:500px) {
    .whatsAppButton {
        border-radius: 67px;
        padding: 10px 24px 11px;
        display: flex;
    }

    .whatsAppButton i {
        font-size: 37px;
        line-height: 48px;
        margin-right: 5px;
        margin-bottom: -4px;
    }

    .whatsAppButton .text .maintitle {
        font-size: 19px;
        font-weight: 600;
        line-height: 21px;
        letter-spacing: -0.4px;
    }

    .whatsAppButton .text .subtitle {
        font-size: 13px;
        line-height: 21px;
    }

    #HeroSection .promo {
        bottom: -27px;
        right: -90px;
        width: 74px;
    }

    .JapanborderTop {
        height: 10px;
    }

    #JapanOffer {
        padding: 25px 0px 30px;
    }

    .offerDeal {
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        margin: 6vw 0vw 0vw;
    }

    .offerDeal .list {
        width: 90%;
    }

    .offerDeal .list:not(:last-child) {
        margin: 0px 0px 30px;
    }

    .offerDeal .list .image img {
        border: 1.5vw solid transparent;
        border-radius: 0px 8vw 0px;
    }

    .offerDeal .list .detail {
        justify-content: flex-start;
        padding: 10px 0px 0px;
    }

    .offerDeal .list .detail .icon {
        margin-right: 4vw;
    }

    .offerDeal .list .detail .icon img {
        height: 11.67vw;
    }

    .offerDeal .list .detail .text {
        font-size: 4.6vw;
        line-height: 5.6vw;
    }

    .GuaranteedQuality {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
        column-gap: 15px;
        width: 100%;
        margin: -70px auto 25px;
        z-index: 14;
        position: relative;
    }

    .GuaranteedQuality .list .inner {
        padding: 11px 12px;
    }

    .GuaranteedQuality .list .inner .number {
        font-size: 27px;
        line-height: 37px;
    }

    .GuaranteedQuality .list .inner .detail {
        padding: 5px 0px 0px;
    }

    .GuaranteedQuality .list .inner .detail .icon {
        margin-right: 15px;
    }

    .GuaranteedQuality .list .inner .detail .icon img {
        height: 26px;
    }

    .GuaranteedQuality .list .inner .detail .text {
        font-size: 15px;
        line-height: 19px;
    }

    .bgWorthOne {
        top: 31%;
        transform: translate(5%, 0%);
        background-blend-mode: color-dodge;
        background-blend-mode: color-dodge;
        mix-blend-mode: color-dodge;
        mix-blend-mode: color-dodge;
        background-blend-mode: color-dodge;
        width: 237px;
    }

    .bgWorthTwo {
        top: 31%;
        right: unset;
        left: 0%;
        transform: translate(-15px, 0%);
        width: 310px;
    }

    .ProfessInstaller {
        position: relative;
        top: unset;
        right: unset;
        transform: unset;
        z-index: 0;
        width: 100%;
        margin-top: -60px;
    }

    #TopNotchQuality {
        padding: 35px 0px;
    }

    #TopNotchQuality .floatLeft {
        width: 15%;
        top: 145px;
    }

    #TopNotchQuality .floatRight {
        width: 15%;
        bottom: 30px;
    }

    #TopNotchQuality .yellowLine {
        position: relative;
        bottom: unset;
        width: 42%;
        margin-top: 5px;
        display: block;
        margin: 0px;
    }

    .notchWorkmanship {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
    }

    .notchWorkmanship .list {
        grid-column: span 2;
    }

    .notchWorkmanship .list:nth-child(1) {
        grid-column: span 4;
    }

    .notchWorkmanship .list:nth-child(7) {
        grid-column: span 4;
    }

    .notchWorkmanship .list:nth-child(8) {
        grid-column: span 4;
    }

    .notchWorkmanship .list:nth-child(6) {
        display: none;
    }

    #Introducing {
        padding: 10vw 0px 0vw;
    }

    .HybridCoating {
        margin: 35px 0px 10px;
    }

    .HybridCoating .list {
        color: white;
    }

    .HybridCoating .list.left {
        width: 45%;
    }

    .HybridCoating .list.left .inner {
        padding: 14px 15%;
        border-radius: 30px 0px 30px 0px;
    }

    .HybridCoating .list.right {
        width: 45%;
    }

    .HybridCoating .list.right .inner {
        background: rgb(4 17 23);
        padding: 14px 20px;
        border-radius: 0px 30px 0px;
        box-sizing: border-box;
    }

    .HybridCoating .list .title {
        font-size: 16px;
        line-height: 20px;
    }

    .HybridCoating .list .desc {
        font-size: 13px;
        line-height: 17px;
        padding-top: 5px;
    }

    .HybridCoating .plus {
        display: flex;
        width: 10%;
        justify-content: center;
        align-items: center;
    }

    .HybridCoating .plus img {
        width: 21px;
    }

    .HybridPoint {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        margin: 30px auto 0px;
    }

    .HybridPoint .list {
        position: relative;
        width: 50%;
        color: white;
        padding-left: 30px;
    }

    .HybridPoint .list:not(:last-child) {
        margin: 0px 0px 10px;
    }

    .HybridPoint .list span {
        background: url(../images/tifinity-checked.png);
        position: absolute;
        width: 19px;
        height: 19px;
        background-size: cover;
        top: 1px;
        left: 0px;
    }

    .packageList {
        margin: 45px 0px 0px;
        flex-direction: column;
        align-items: center;
    }

    .packageList .list {
        width: 94%;
    }

    .packageList .list:not(:last-child) {
        margin: 0px 0px 35px;
    }
    
    .packageList .list .redCircle {
        transform: translate(-50%, 8%);
        width: 190px;
        height: 190px;
    }

    .tifiniBG {
        padding: 90px 0px 30px;
        clip-path: ellipse(182% 71% at 50% 75%);
    }

    .Porsche {
        transform: translate(-50%, -50%);
        width: 85%;
    }

    .Mercedes {
        transform: translate(-50%, -43%);
    }

    #PromoPackage {
        padding: 33px 0px 270px;
        margin-bottom: -190px;
    }

    #PromoPackage .underline {
        bottom: -7px;
        width: 56%;
    }

    #ServedYears {
        padding: 35px 0px 50px;
    }

    .ServedOver {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 12px;
    }

    .CTA {
        margin: 30px auto 0px;
    }

    .CTA .inner {
        padding: 35px 25px;
        flex-direction: column;
        align-items: center;
    }

    .CTA .inner .left {
        width: 70%;
    }

    .CTA .inner .left img {
        display: block;
        width: 100%;
    }

    .CTA .inner .right {
        width: 100%;
        padding: 0px 0px 30px;
    }

    .CTA .inner .right .title {
        font-size: 27px;
        line-height: 37px;
        letter-spacing: 0em;
        text-align: center;
        color: white;
        text-transform: uppercase;
    }

    .CTA .inner .right img {
        margin: 10px auto 18px;
        width: 50%;
    }

    .CTA .inner .right .subtitle {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0em;
        text-align: center;
        color: white;
    }
    
    .ReviewTitle .number {
        font-size: 50px;
        line-height: 50px;
    }
    
    .ReviewTitle .middle {
        margin: 0px 10px;
    }
    
    .ReviewTitle .middle .stars img {
        width: auto;
        margin: 0px auto 3px;
        height: 20px;
    }
    
    .ReviewTitle .middle .text {
        font-size: 28px;
        line-height: 32px;
    }
    
    .ReviewTitle .google img {
        width: 48px;
    }
    
    .swiper_Reviews .swiper-slide {
        width: 80%;
    }
    
    .ReviewsFlexGroup .selfCard {
        padding: 20px 15px;
        gap: 12px;
    }
    
    .ReviewsFlexGroup .selfCard .person .img {
        margin-right: 10px;
    }
    
    .ReviewsFlexGroup .selfCard .person .img img,
    .ReviewsFlexGroup .selfCard .person .logo {
        width: 40px;
    }
    
    .ReviewsFlexGroup .selfCard .person .info .name {
        font-weight: 600;
        font-size: 15px;
        line-height: 21px;
    }
    
    .ReviewsFlexGroup .selfCard .text {
        font-size: 15px;
        line-height: 23px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: auto !important;
        overflow-x: hidden !important;
        padding-right: 10px;
        scrollbar-color: #8d8d8d #e0e0e0;
        scrollbar-width: thin;
    }

    /* Misconception */
    #Misconception .underTitleline {
        margin-left: 313px;
    }

    .misImage {
        border-radius: 10px;
        border: 5px solid #FFFFFF;
        box-shadow: 0px 4px 4px 0px #00000040;
    }

    .ConceptClick {
        border-radius: 5px 30px 0px 0px;
    }

    .ConceptClick .group {
        padding: 25px 15px 20px 15px;
    }

    .ConceptClick .group .tag {
        font-size: 26px;
        line-height: 32px;
        -webkit-text-stroke-width: 1px;
        margin-top: -42px;
        letter-spacing: -1px;
    }

    .ConceptClick .group .tag img {
        margin: 0px 10px 0px 0px;
        width: 31px;
    }

    .ConceptClick .group .title {
        font-size: 19px;
        line-height: 25px;
    }

    .ConceptClick .group .desc {
        width: 100%;
        font-size: 16px;
        line-height: 24px;
    }

    .misconceptAnswer {
        padding: 16px 8px;
    }

    .accordion-button::after {
        width: 2.25rem;
        height: 2.25rem;
        top: 35%;
    }

    .accordion-button:not(.collapsed)::after {
        transform: translate(-18%, -100%);
    }

    .ReallyBorder {
        padding: 20px 20px 30px;
    }

    .coverImage {
        aspect-ratio: 7 / 4;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .withWrongTitle {
        height: 25px;
    }

    .withRightTitle {
        height: 25px;
        margin-right: 5px;
        margin-top: -8px;
    }

    .borderLine {
        width: 95px;
        border-top: 3px solid #11BCC8;
    }

    #ExpertEV {
        padding: 40px 0px;
    }

    #ExpertEV .floatLeft {
        top: 18%;
        left: 0px;
        width: 65px;
    }

    #ExpertEV .floatRight {
        top: 33%;
        right: 0px;
        width: 65px;
    }

    #ExpertEV .floatEV {
        top: 12%;
        width: 145px;
    }

    span.ev_icon {
        margin-right: 0px;
    }

    span.ev_icon img {
        width: 52px;
    }

    .EVlist {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 12px;
    }
    
    .EVlist .list span {
        width: 49px;
        height: 15px;
        bottom: 10px;
        right: 10px;
    }

    #FirstAcademy {
        padding: 40px 0px;
    }

    .swiper_Academy .swiper-slide {
        width: 70%;
    }

    #OurTeam {
        padding: 30px 0px;
    }

    #OurTeam .floatLeft {
        top: 6%;
        left: 0px;
        width: 55px;
    }

    #OurTeam .floatRight {
        top: 6%;
        right: 0px;
        width: 55px;
    }

    .TeamList {
        justify-content: space-between;
        margin: 70px auto 0px;
    }

    .TeamList .list {
        width: 49%;
    }

    .TeamList .list:nth-child(5),
    .TeamList .list:nth-child(6) {
        margin: 0px 0px 117px;
    }

    .TeamList .list.space {
        margin: 0px 0px 117px;
    }

    .TeamList .list .top .bg {
        height: 145px;
        border-radius: 60px 0px 30px 0px;
    }

    .TeamList .list .top .image img {
        height: 228px;
    }

    .TeamList .list .bottom {
        font-size: 20px;
        line-height: 28px;
        text-transform: uppercase;
    }
    
    #Youtube {
        padding: 35px 0px;
    }
    
    span.youtube_icon {
        display: block;
        margin: 0px auto 10px;
    }
    
    span.youtube_icon img {
        width: 50px;
    }
    
    .lessonTube {
        width: 100%;
        margin: 25px auto 15px;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .lessonTube .list {
        border-radius: 17px 0px;
        padding: 4px 17px;
        min-width: auto;
    }
    
    .lessonTube .list .text {
        font-size: 16px;
        line-height: 24px;
    }

    #LocationContact {
        padding: 30px 0px 10px;
    }

    #LocationContact .social {
        justify-content: center;
        margin-top: 26px;
    }

    #LocationContact .social .icon img {
        width: 32px;
    }
    
    /* branchLocation */
    .branchLocation {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0px auto;
        width: 90%;
    }
    
    .branchLocation .list {
        width: 100%;
        color: white;
        text-align: left;
    }

    .branchLocation .list .mapLinks {
        padding: 22px 0px 10px;
    }

    .branchLocation .list .mapLinks .google a img {
        margin-right: 4px;
    }

    .branchLocation .list .location {
        font-size: 19px;
        line-height: 27px;
    }

    .branchLocation .list .address {
        font-size: 16px;
        line-height: 24px;
    }

    .branchLocation .list .opening {
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
    }
    
    .branchLocation .list .weekend {
        padding: 10px 0px 0px;
    }
    
    .branchLocation .list .weekend .list {
        font-size: 16px;
        line-height: 20px;
        width: 100%;
    }

    .TopThreeCoating {
        width: 90%;
        margin: 15vw auto 0px;
        gap: 12vw;
        flex-direction: column;
    }
    .TopThreeCoating .list {
    }
    .TopThreeCoating .list .top {
        width: 20vw;
        top: -6vw;
        left: -4vw;
    }
    .TopThreeCoating .list .top img {
    }
    .TopThreeCoating .list .bottom {
        border-radius: 30px 0px 30px 0px;
        background: linear-gradient(180deg, #1197A1 0%, #5FD7E0 50%, #11BCC8 100%);
        overflow: hidden;
        border: 4px solid transparent;
    }
    .TopThreeCoating .list .bottom img {
        display: block;
        width: 100%;
    }
}