@media only screen and (max-width:1152px){
    .element-title h2 {
        font-size: 32rem;
        line-height: 1.2em;
    }
    .content-wrap p {
        font-size: 24rem;
    }
}


@media only screen and (max-width: 768px) {
    .hotspot-point:hover .hov-button {
        display: none !important;
    }
    .clyte-container {
        max-width: 100%;
    }
    .clyte-outer-div {
        display: block;
    }
    .lft-connect {
        display: none;
    }
    .middle-elements {
        justify-content: center;
    }
    .clyte-img img {
        width: 1385rem;
    }
    .middle-elements {
        height: auto !important;
    }
    .hotspot, .hotspot-point.active .hotspot {
        width: 40px;
        height: 40px;
    }
    .manufacturing .two .hotspot {
        left: 1059rem !important;
        bottom: 719rem !important;
    }
    .hov-button {
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 60px;
    }
    .manufacturing .three .hotspot {
        left: 588rem !important;
        top: 395rem !important;
    }
    .manufacturing .four .hotspot {
        left: 428rem !important;
        top: 463rem !important;
    }
    .manufacturing .one .hotspot {
        left: 840rem !important;
        top: 771rem !important;
    }
    .element-title h2 {
        font-size: 20px;
    }
    .retail .two .hotspot {
        right: 415rem !important;
        top: 465rem !important;
    }
    .retail .one .hotspot {
        left: 1029rem !important;
        bottom: 499rem !important;
    }
    .retail .three .hotspot {
        left: 500rem !important;
        top: 491rem !important;
    }
    .retail .four .hotspot {
        left: 209rem !important;
        top: 592rem !important;
    }
    .retail .five .hotspot {
        left: 359rem !important;
        bottom: 360rem !important;
    }
    .connected-cars  .two .hotspot {
        right: 288rem !important;
        top: 258rem !important;
    }
    .connected-cars .four .hotspot {
        left: 480rem !important;
        top: 364rem !important;
    }
    .connected-cars .one .hotspot {
        left: 511rem !important;
        bottom: 489rem !important;
    }
    .connected-cars .three .hotspot {
        left: 781rem !important;
        top: 581rem !important;
    }
    .element-title {
        top: 1230rem;
    }
    .manufacturing, .retail, .connected-cars {
       margin-bottom: 40px;
    }
    .retail .element-title {
        top: 1330rem !important;
    }
    .connected-cars .three .hov-button {
        width: 280px;
    }
    .connected-cars .two .hov-button {
        width: 280px;
    }
    .manufacturing .two .hov-button {
        left: -64px;
    }
    .retail .one .hov-button {
        left: -25px;
    }
    .retail  .two h2.hov-button {
        width: 190px;
        left: -30px;
    }
    .retail  .six .hotspot{
        left: 583rem !important;
        bottom: 332rem !important;
    }
    .clyte-head h2 {
        font-size: 25px;
        padding-top: 20px;
    }
    .content-point {
        padding: 20px;
        background: #fff;
        min-height: 135px;
        border-radius: 0;
        box-shadow: 0px -4px 30px 0px rgba(0, 0, 0, 0.15);
    }
    /* .manufacturing-content, .retail-content, .connected-cars-content {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 0;
      z-index: 99;
    } */
    .bottom-element {
        padding: 0 0;
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 99;
        width: 100%;
    }
    .content-wrap .heading {
        font-size: 18px;
        color: #1E1E1E;
        margin-bottom: 10px;
    }
    .content-wrap p {
      font-size: 14px;
      color: #7C7C7C;
    }
    .clyte-outer-div {
        padding-bottom: 0;
    }
    .bottom-element {
        min-height: auto;
    }
    .close {
        font-size: 20px;
        color: #000;
        right: 10px;
        top: 12px;
        line-height: 20rem;
    }
    .close:hover {
        opacity: 1;
        color: #000;
    }
    .center-content {
        padding: unset; 
        min-height: auto;
        display: block;
    }
    .center-content br{
        display: none;
    }
}
@media only screen and (max-width: 575px) {
    .hotspot , .hotspot-point.active .hotspot{
        width: 35px;
        height: 35px;
    }
    .hov-button {
        font-size: 14px;
    }
    /* .content-point {
        padding: 15px;
        min-height: 175px;
    } */
}

@media only screen and (max-width: 480px) {
    .hotspot, .hotspot-point.active .hotspot {
        width: 30px;
        height: 30px;
    }
    .hov-button {
        font-size: 12px;
        padding: 6px 12px;
    }
    .element-title h2 {
        font-size: 18px;
        width: max-content
    }
    .retail .one .hov-button {
        left: -78px;
        top: 32px;
    }
    .connected-cars  .one h2.hov-button {
        left: -45px;
    }
    .retail .two h2.hov-button {
        left: -51px;
        top: -47px;
        width: 147px;
    }
    .manufacturing .two .hov-button {
        left: -113px;
        top: -47px;
    }
    .manufacturing .four h2.hov-button {
        left: -28px;
    }
    .manufacturing .four .hotspot {
        left: 338rem !important;
        top: 356rem !important;
    }

    /******/
    .manufacturing .four h2.hov-button {
        left: -28px;
        top: -35px;
    }
    .hotspot:hover  {
        background: url(../images/Green-Dark-Hotspot.svg) no-repeat center center;
        background-size: contain;
    }
      .manufacturing .three .hov-button {
        top: 39px !important;
    }
    .manufacturing .one .hov-button {
        top: 30px;
    }
    .manufacturing .five .hov-button {
        top: 30px;
    }
    .retail .three .hov-button {
        top: -35px;
    }
    .retail .four .hov-button {
        top: -50px;
    }
    .retail .five .hov-button {
        top: 30px;
    }
    .manufacturing .three .hotspot {
        top: 336rem !important;
    }
    .retail .four .hotspot {
        top: 513rem !important;
    }
    .retail .three .hotspot {
        left: 475rem !important;
        top: 416rem !important;
    }
    .retail .two .hotspot {
        top: 380rem !important;
    }
    .connected-cars .four .hov-button {
        left: -99px;
        top: 18px;
    }
    .connected-cars .one .hotspot {
        left: 483rem !important;
        bottom: 438rem !important;
    }
    .connected-cars .one h2.hov-button {
        left: -45px;
        top: 33px;
    }
    .connected-cars .two .hotspot {
        top: 193rem !important;
    }
    .connected-cars .two .hov-button {
        width: 183px;
        left: -63px;
        top: -45px;
    }
    .connected-cars .three .hotspot {
        left: 730rem !important;
        top: 539rem !important;
    }
    .connected-cars .three .hov-button {
        width: 142px;
        top: -3px;
        left: -144px;
    }
    .retail .six .hov-button {
        top: 30px;
        left: -61px;
    }
    .content-wrap .heading {
        font-size: 16px;
        margin-bottom: 7px;
    }
    .content-wrap p {
        font-size: 13px;
    }
   
}

@media only screen and (max-width: 340px){
  
}