/* Extra large devices (1200px and down) */

@media screen and (max-width: 1200px) {
    .carousel-control-next, .carousel-control-prev{
        width: auto;
    }
  
}


/* Large devices (992px and down) */

@media screen and (max-width: 992px) {
    .nav-link {
        font-size: 16px;
        letter-spacing: 1px;
        margin: 0 !important;
    }
    .tran-space-right {
        padding: 50px;
    }
    .ban-text-box .ban-h{
        font-size: 40px;
    }
}


/* Medium devices (768px and down) */

@media screen and (max-width: 768px) {
    .th-h1 {
        font-size: 32px;
        line-height: 40px;
    }

    header {
        background: rgba(0, 0, 0) !important;
    }

    header.active {
        background: rgba(0, 0, 0) !important;
    }

    .th-big-h {
        font-size: 50px;
        line-height: 55px;
    }

    header {
        background-color: #202020 !important;
    }

    .th-p {
        font-size: 20px;
        line-height: 26px;
    }

    .btn-1 {
        padding: 5px 18px;
        font-size: 18px;
        color: var(--th-color-1);
    }

    .btn-1::after {
        width: 100%;
    }

    header {
        background: #202020;
    }

    .nav-link {
        color: var(--th-color-1);
    }

    .nav-link:hover {
        color: var(--th-color-1);
    }

    .nav-link::after {
        background-color: var(--th-color-1);
    }

    .nav-item {
        padding-top: 20px;
    }

    .navbar img {
        width: 160px;
        transition: all .5s;
    }

    .navbar .container-xxl {
        align-items: center;
    }

    .navbar-toggler {
        border: none;
        padding: 0;
    }

    .banner-text .btn-1 {
        margin-top: 20px;
    }

    .navbar-toggler-icon {
        width: 1.3em;
        height: 1.3em;
    }

    .ban-text-box .ban-h {
        font-size: 22px;
        line-height: 130%;
    }

    #banner .carousel-item {
        min-height: 500px;
    }

    .banner-text {
        background: transparent;
        backdrop-filter: blur(1px);
        /* padding: 30px; */
    }
    .ban-text-box{
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .banner-text .ban-text-box {
        position: relative;
        transform: translateY(110px);
        background-color: #ffffffae;
        padding: 20px;
    }

    .coll-h {
        font-size: 20px;
        margin-bottom: 16px;
        text-align: center;
    }

    .ban-p {
        font-size: 18px;
        line-height: 25px;
    }

    .collection .col-md-3:nth-child(1) {
        transform: translateY(0px);
    }

    .collection .col-3:nth-child(2) {
        /* transform: translateY(-40px); */
    }

    .collection .col-md-3:nth-child(3) {
        transform: translateY(0px);
    }

    .coll-box .btn-1 {
        position: st;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -150%);
        opacity: 1;
        transition: all .5s;
    }

    .story-text .story-h,
    .h-pro-text .story-h {
        font-size: 26px;
    }

    .hotspot-text {
        padding: 0 20px;
    }

    .armonia_franchise_awaits .th-h1 {
        padding: 20px 0;
    }

    .armonia_franchise_awaits .carousel-indicators {
        position: absolute;
        top: 100%;
        right: 0%;
        margin: 0;
    }


    .elevate_space .elevate_space_img img {
        transform: translateY(0px);
    }

    .elevate_space .elevate_space_text {
        padding: 20px 10px;
    }

    .elevate_space_text .th-p {
        margin-top: 18px;
    }

    .elevate_space_text .btn-1 {
        margin-top: 18px;
    }

    .elevate_space .th-h1 {
        line-height: 30px;
    }

    .testimonal .th-h1 {
        margin-bottom: 0;
    }

    .testimonal .col-md-5,
    .testimonal .col-12 {
        padding: 20px;
    }


    /* About Page  */
    .intro-text-box .th-h1 {
        font-size: 22px;
        font-weight: 600;
        line-height: 30px;
    }

    .mission-text {
        padding: 20px;
        transform: translateX(0%);
    }

    .mission .mission-heading {
        font-size: 32px;
        font-weight: 400;
        line-height: 32px;
        /* 100% */
        letter-spacing: 0.96px;
    }

    .mission-img {
        padding: 0px;
    }

    .mission-img img {
        margin-top: 0;
        transform: scale(1) !important;
    }

    .management {
        /* padding: 0; */
    }

    .manag-box {
        flex-direction: column;
    }

    .manag-box img {
        width: 100%;
    }

    .management .manag-text {
        margin: 10px !important;
    }

    .management .manag-text .th-h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .management .th-big-h {
        margin-bottom: 30px;
    }

    .manag-text .th-h1 {
        font-size: 18px;
    }

    .manag-text .th-p {
        font-size: 14px;
    }

    /* .manag-tab {
        position: static;
    } */
    .manag-right {
        min-height: 276px;
    }


    .more-about-right {
        padding: 20px;
    }

    .ft-u-img {
        width: 100px;
    }


    .tran-space-right {
        padding: 20px;
    }

    .bread_crumb {
        padding-bottom: 10px;
    }

    .tran-space-right {
        overflow: hidden;
    }

    .tran-your-space {
        padding: 50px 0;
    }

    .consultation-h {
        padding-bottom: 0 !important;
    }

    /* .store-loc {
        padding-top: 50px;
    }

    .store-search-box {
        width: 90%;
        padding: 10px 14px;
        display: inline-block;
    }

    .store-search-box input {
        width: 100%;
    }

    .store-loc-tab,
    .category-tabs {
        width: 100%;
    }

    .store-loc .loc-tab .loc-tab-btn,
    .category-tabs li {
        border: none;
        padding: 5px;
        font-size: 20px;
    }

    .store-loc-btn,
    .category-tabs-btn {
        padding: 10px;
        border: 1px solid var(--th-black);
    }

    .store-loc .loc-tab {
        padding: 0px;
    }

    .store-loc-tab ul,
    .category-tabs ul {
        display: block;
        border: 1px solid var(--th-black);
    } */

    .loc-box {
        margin-bottom: 30px;
    }

    .product-details .p-name {
        margin-bottom: 20px;
    }

    .product-details .row {
        margin-top: 15px;
    }

    .product-details .col-sm-8 {
        margin-top: 10px;
    }

    .category-tabs li {
        margin-top: 0%;
        transition: all .5s;
        padding: 10px;
    }

    .category-tabs li.active::after {
        width: 0%;
    }

    .category-tabs {
        margin-bottom: 20px;
    }

    .category-tabs li.active,
    .category-tabs li:hover,
    .category-tabs-btn.active,
    .category-tabs-btn:hover {
        background-color: var(--th-black);
        color: var(--th-color-2);
    }

    .city-title {
        margin: 20px 0;
    }

    .store {
        margin-top: 30px;
    }

    .collection {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .collection .row {
        margin-bottom: 0;
    }

    .testimonal .col-12:nth-child(1),
    .testimonal .col-12:nth-child(2),
    .testimonal .col-12:nth-child(3) {
        background-color: transparent !important;
    }

    .over-year-slider img {
        width: 100%;
    }

    .more-about {
        padding-top: 00px;
        padding-bottom: 50px;
    }

    .consultation-h .col-12 {
        padding: 0;
    }

    /* 
    .more-about .container-xxl,
    .faq .container-xxl,
    .media .container-xxl {
        padding: 0;
    }

    .more-about .col-md-5,
    .media .col-md-6 {
        padding: 0;
    } */
    .welcome {
        padding-top: 0px;
        padding-bottom: 0;
    }

    .more-about .col-md-7 {
        padding-top: 30px;
    }

    .more-about .th-h1 {
        margin-bottom: 20px;
    }

    .faq-tab span:nth-child(1) {
        font-size: 32px;
    }

    .armonia_franchise_awaits,
    .elevate_space,
    .testimonal,
    .over-year,
    .media {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .mission,
    .elevate_space_text {
        padding-bottom: 50px !important;
    }

    .media .media-text {
        padding: 20px;
    }

    .media-box {
        padding: 10px 0;
    }

    .footer img {
        max-width: 230px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .footer .th-p {
        margin-bottom: 20px;
    }

    .faq {
        padding-bottom: 0;
    }

    .franch-testimonal {
        padding-top: 0;
        padding-bottom: 0;
    }

    .category-tabs ul {
        list-style: none;
        display: block;
    }

    .media .media-text .th-h1 {
        color: #202020;
        font-family: var(--th-font-2);
        font-size: 31px;
        font-weight: 600;
        line-height: 115%;
        margin-bottom: 20px;
    }

    .testimonal-box {
        flex-direction: column;
        align-items: end;
    }

    .testimonal-img {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0 0 0;
        gap: 20px;
    }

    .left-to-right::after,
    .left-to-right::before {
        content: " ";
        width: 100%;
    }

    .intro-video {
        padding-top: 74px;
        padding-bottom: 40px;
    }

    .hotspot-img {
        width: 400px;
        height: 244px;
    }

    .hotspot-img .Story-icon {
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
    }

    #Story-1-1 {
        transform: translate(220px, 38px);
    }

    #Story-1-2 {
        transform: translate(140px, 55px);
    }

    #Story-1-3 {
        transform: translate(260px, 132px);
    }

    #Story-1-4 {
        transform: translate(70px, 140px);

    }

    #Story-1-5 {
        transform: translate(260px, 170px);
    }

    #Story-2-1 {
        transform: translate(200px, 40px);
    }

    #Story-2-2 {
        transform: translate(200px, 90px);
    }

    #Story-2-3 {
        transform: translate(50px, 185px);
    }

    #Story-2-4 {
        transform: translate(6px, 80px);
    }

    #Story-2-5 {
        transform: translate(330px, 170px);
    }

    #Story-3-1 {
        transform: translate(200px, 40px);
    }

    #Story-3-2 {
        transform: translate(200px, 150px);
    }

    #Story-3-3 {
        transform: translate(80px, 155px);
    }

    #Story-3-4 {
        transform: translate(35px, 90px);
    }

    #Story-3-5 {
        transform: translate(360px, 180px);
    }

    .hotspot-pop-img img {
        width: 100%;
        max-width: fit-content;
        height: 100%;
        max-height: 200px;
    }

    .common-slider .carousel-control-next,
    .common-slider .carousel-control-prev {
        margin: 0px 2px;
    }

    .common-slider .carousel-control-next .far,
    .common-slider .carousel-control-prev .far {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
    }
    .product-box {
        padding: 24px;
    }
    .product-text .pro-name {
        font-size: 20px;
        margin-top: 20px;
    }
    body section.store-search,
    body section.bread_crumb,
    body section.consultation-h,
    body section.welcome {
        padding-top: 40px;
    }
    .top-space{
        margin-top: 70px !important;
    }
    .top-to-bottom::after,.top-to-bottom::before{
        width: 0px !important;
        height: 0px !important;
    }
}


/* Small devices (576px and down) */

@media screen and (max-width: 576px) {
    #arrow-container {
        bottom: 70px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    #call-to-action{
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    #call-to-action img{
        max-width: 30px;
        max-height: 30px;
    }

    .th-h1,
    .th-big-h {
        font-size: 32px;
        font-weight: bold;
        line-height: 40px;
    }
  

    #product-popup {
        width: auto;
        background-color: var(--th-black);
        /* text-align: center; */
    }

    .close {
        width: 100%;
    }

    #product-popup,
    .close {
        max-width: 300px;
        flex-direction: column;
        justify-content: start;
    }

    #pro-slider {
        width: auto;
    }

    #pro-slider img {
        width: auto;
        max-width: 290px;
        height: 100%;
        max-height: 360px;

    }

    .pro-h {
        font-size: 20px;
        line-height: 20px;
    }

    .pro-des {
        font-size: 16px;
        line-height: 18px;
    }

    .pro-call {
        font-size: 18px;
        padding: 4px 0;
    }
    .hotspot-img {
        width: 320px;
        height: 194px;
    }
    .hotspot-pop-img img {
        max-height: 130px;
    }
    .hotspot-img .Story-icon {
        width: 15px;
        height: 15px;
        line-height: 15px;
        font-size: 10px;
    }

    .hotspot .carousel-control-prev .far.fa-arrow-left,
.hotspot .carousel-control-next .far.fa-arrow-right{
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
}
    #Story-1-1 {
        transform: translate(200px, 30px);
    }

    #Story-1-2 {
        transform: translate(110px, 50px);
    }

    #Story-1-3 {
        transform: translate(210px, 100px);
    }

    #Story-1-4 {
        transform: translate(70px, 120px);

    }

    #Story-1-5 {
        transform: translate(200px, 140px);
    }

    #Story-2-1 {
        transform: translate(170px, 30px);
    }

    #Story-2-2 {
        transform: translate(170px, 75px);
    }

    #Story-2-3 {
        transform: translate(50px, 140px);
    }

    #Story-2-4 {
        transform: translate(6px, 80px);
    }

    #Story-2-5 {
        transform: translate(265px, 145px);
    }

    #Story-3-1 {
        transform: translate(200px, 40px);
    }

    #Story-3-2 {
        transform: translate(200px, 150px);
    }

    #Story-3-3 {
        transform: translate(65px, 125px);
    }

    #Story-3-4 {
        transform: translate(35px, 90px);
    }

    #Story-3-5 {
        transform: translate(290px, 140px);
    }
    .advertisement-box iframe {
        width: 100%;
        height: 100% !important;
        max-height: 320px !important;
        min-height: 320px !important;
    }
}