/*////////////////// Responsive CSS Structure /////////////////////*/

@media (min-width: 1400px) {
.container {max-width: 1210px;}
}


@media (min-width: 1200px) and (max-width: 1399px){
/* ----- zimmer ----- */
.zimmer-main .container-fluid { width: calc(552px + 50vw);}
.zimmer-main .slick-arrow {right: 44px;}
/* ----- zimmer ----- */
}

@media (min-width: 1200px) and (max-width: 1299px){
/* ----- header / banner ----- */
.header {padding-top: 40px;}
.header.fixed-header {padding-top: 0px;}
.navbar-brand {max-width: 150px;height: 48px;}
.banner-wrapper { padding-top: 150px; padding-bottom: 50px;height: 700px;}
/* ----- header / banner ----- */

/* ----- service ----- */
.service-inner { padding: 50px 40px 50px 0px; }
.image-box .service-image {padding-left: 40px;}
.services-wrapper .service-box:nth-child(even) .service-inner { padding: 50px 0px 50px 0px; }
/* ----- service ----- */
}


@media (min-width: 992px) and  (max-width: 1199px){
/* ----- header / banner ----- */
.header {padding-top: 32px;}
.header.fixed-header {padding-top: 0px;}
.navbar-brand {max-width: 150px;height: 48px;}
.banner-wrapper { padding-top: 150px; padding-bottom: 50px;height: 700px;}
/* ----- header / banner ----- */

/* ----- zimmer ----- */
.zimmer-main .container-fluid { width: calc(463px + 50vw);}
.zimmer-main .slick-arrow {right: 32px;}
/* ----- zimmer ----- */

/* ----- service ----- */
.service-inner { padding: 30px 20px 30px 0px; }
.image-box .service-image {padding-left: 20px;}
.services-wrapper .service-box:nth-child(even) .service-inner { padding: 30px 0px 30px 20px; }
.services-wrapper .service-box:nth-child(even) .image-box .service-image { padding-right: 20px;}
/* ----- service ----- */

/* ----- footer ----- */
.footer-logo { max-width: 160px; height: 50px;}
/* ----- footer ----- */
}


@media (min-width: 768px) and (max-width: 991px){
/* ----- header / banner ----- */
.header {padding-top: 32px;}
.header.fixed-header {padding-top: 0px;}
.navbar-brand {max-width: 150px;height: 48px;}
.banner-wrapper { padding-top: 150px; padding-bottom: 50px;height: 700px;}
.nav-link {margin-right: 20px;font-size: 14px;}
.header-btn-group .btn {padding: 8px 14px;font-size: 12px;}
.header-btn-group >* {margin-right: 12px;}
/* ----- header / banner ----- */

/* ----- zimmer ----- */
.zimmer-main .container-fluid { width: calc(344px + 50vw);}
.zimmer-main .slick-arrow {right: 40px;}
/* ----- zimmer ----- */

/* ----- service ----- */
.service-inner .detail  {font-size: 14px;}
.service-inner { padding: 30px 10px 30px 0px; }
.image-box .service-image {padding-left: 10px;}
.services-wrapper .service-box:nth-child(even) .service-inner { padding: 30px 0px 30px 10px; }
.services-wrapper .service-box:nth-child(even) .image-box .service-image { padding-right: 10px;}
/* ----- service ----- */

/* ----- footer ----- */
.footer-logo { max-width: 140px; height: 44px;}
/* ----- footer ----- */

}

@media (max-width: 767px) {

/* button-start */
button.navbar-toggler { border: none; } 
.navbar-toggler { right: 0; top: 3px; } 
.navbar-toggler { border: none; background-color: transparent; position: relative; z-index: 9999; right: 0; } 
.navbar-collapse { position: fixed; top: 0; right: -100%; max-width: 100%; width: 100%; bottom: 0; height: 100vh; overflow: auto; background-color: var(--choclate); transition: 0.5s; z-index: 9;display: block !important; } 
.navbar-collapse.show { right: 0; } 
.navbar-collapse.show::before { right: 0; } 
.navbar-collapse::before { content: ""; position: fixed; width: 100%; height: 80px; top: 0; right: -100%; background-color: var(--choclate); transition: 0.5s; z-index: 9; } 
.navbar .navbar-nav { align-items: center; position: relative; top: 140px; } 
.header .navbar-nav .nav-item { padding: 10px 0; } 
.header .navbar-nav .nav-item:first-child { padding-left: 0; } 
.navbar-toggler span { background-color: var(--beige); width: 25px; height: 2px; display: block; margin-bottom: 5px; transition: 0.5s; position: relative; } 
.navbar-toggler-icon {background-image: unset;}
.navbar-toggler.open span:first-child { top: 5px; transform: rotate(45deg); } 
.navbar-toggler.open span:nth-child(2) { display: none; } 
.navbar-toggler.open span:last-child { top: -2px; transform: rotate(-45deg); } 
.navbar-toggler:focus { box-shadow: none; }
.nav-item:has(.btn) {display: inline-block;}
.nav-main {display: flex;}

.navbar { padding: 0; }
.header {padding-top: 20px;}
.header.fixed-header {padding-top: 0px;}
.navbar-brand { max-width: 120px; height: 48px;margin-bottom: 0;overflow: hidden;}
.nav-link {margin-right: 0px;font-size: 14px;}
.header-btn-group .btn {padding: 8px 14px;font-size: 12p;}

.header-btn-group {display: none;}
/* button-end */


/* ----- banner ----- */
.banner-inner .eye-btn {width: 40px; height: 40px;}
.banner-inner .eye-btn img {width: 24px;}
.banner-inner .contact-btn {padding: 4px 10px;}
.banner-inner .contact-btn img {width: 16px;height: 14px;}
/* ----- banner ----- */

/* ----- zimmer ----- */
.zimmer-detail { margin-top: 22px; }
.zimmer-main .zimmer-left {padding-top: 20px;justify-content: center;align-items: center;}
.zimmer-main .zimmer-detail .detail {text-align: center;}
.zimmer-main .slick-arrow.slick-prev {margin-right: 40px;}
.zimmer-main .slick-list { margin: 0 -6px; }
.zimmer-main .slick-slide { padding: 0 6px; }
.zimmer-main .slick-arrow.slick-prev {width: 14px;height: 14px;}
.zimmer-main .slick-arrow.slick-next {width: 14px;height: 14px;}
/* ----- zimmer ----- */

/* ----- service ----- */
.services-wrapper .row {flex-direction: column-reverse;}
.service-image .row {flex-direction: row;}
.services-wrapper .service-box:nth-child(even) .row {flex-direction: column-reverse;}
.services-wrapper .service-box:nth-child(even) .service-inner { padding: 24px; }
.service-inner {text-align: center;}
.service-inner .button-group {justify-content: center;}
.image-box {position: relative;}
.image-box .service-image {padding-left: 0;}
.services-wrapper .service-box:nth-child(even) .image-box .service-image {padding-right: 0;}
/* ----- service ----- */

/* ----- footer ----- */
.footer-logo { max-width: 140px; height: 44px;}
.footer-left {text-align: center;}
.footer-right {text-align: center;margin-top: 16px;}
.footer-left .top-detail ul {justify-content: center;}
.footer-logo {margin-left: auto;margin-right: auto;}
.footer-icon {justify-content: center; }
/* ----- footer ----- */
}

/*---------- Small Mobile , IPhone Start ----------*/

/*=== Screen Size = 240, 320, 360, 480, 568 ===*/
@media (min-width: 576px) and (max-width: 767px){ 
.banner-wrapper { padding-top: 100px; padding-bottom: 50px;height: 630px;}


/* ---- zimmer ---- */
.zimmer-main .container-fluid { width: calc(254px + 50vw);}
.zimmer-main .slick-list {padding-right: 50px;}
.zimmer-main .slick-arrow {right: 45px;}
.slide-over {max-width: 85%;max-height: 85%;}
/* ---- zimmer ---- */

/* ----- service ----- */
.service-inner { padding: 30px 0px 30px 0px; }
.services-wrapper .service-box:nth-child(even) .service-inner { padding: 30px 0px 30px 0px; }
/* ----- service ----- */
}

@media (min-width: 240px) and (max-width: 575px){
.banner-wrapper { padding-top: 100px; padding-bottom: 50px;height: 630px;}

/* ---- zimmer ---- */
.zimmer-main .slick-arrow {right: 15px;}
.zimmer-main .slick-list {padding-right: 80px;}
.zimmer-main .container-fluid { width: 100%;padding-left: 15px; padding-right: 0px;}
.slide-over {max-width: 90%;max-height: 90%;}
/* ---- zimmer ---- */

/* ----- service ----- */
.service-inner { padding: 24px 0px; }
.services-wrapper .service-box:nth-child(even) .service-inner { padding: 24px 0px; }
/* ----- service ----- */


.top-detail {margin-top: 18px;}
}

@media (max-width:424px) {
    .zimmer-main .slick-list {padding-right: 0px;}
    .zimmer-main .container-fluid {padding-right: 15px;}
}